<div class="relative w-full max-w-md mx-auto p-4">
<!-- Basic Stack - Items stacked on top of each other -->
<div class="relative h-32 w-full">
<!-- First Item (bottom) -->
<div class="absolute inset-0 bg-blue-500 text-white rounded-lg flex items-center justify-center">
First Item
</div>
<!-- Second Item (middle) -->
<div class="absolute inset-0 bg-blue-400 text-white rounded-lg flex items-center justify-center transform translate-y-2 translate-x-2 w-5/6 h-5/6 z-10">
Second Item
</div>
<!-- Third Item (top) -->
<div class="absolute inset-0 bg-blue-300 text-blue-800 rounded-lg flex items-center justify-center transform translate-y-4 translate-x-4 w-2/3 h-2/3 z-20">
Third Item
</div>
</div>
<!-- Stack with images -->
<div class="relative h-64 w-full mt-8">
<!-- First Image (bottom) -->
<div class="absolute inset-0 overflow-hidden rounded-lg">
<img src="https://images.unsplash.com/photo-1500964757637-c85e8a162699" alt="Landscape" class="w-full h-full object-cover" />
</div>
<!-- Second Image (middle) -->
<div class="absolute inset-0 overflow-hidden rounded-lg transform translate-y-4 translate-x-4 w-5/6 h-5/6 z-10">
<img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" alt="Landscape" class="w-full h-full object-cover" />
</div>
<!-- Third Image (top) -->
<div class="absolute inset-0 overflow-hidden rounded-lg transform translate-y-8 translate-x-8 w-2/3 h-2/3 z-20">
<img src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e" alt="Landscape" class="w-full h-full object-cover" />
</div>
</div>
<!-- Stack with cards -->
<div class="relative h-64 w-full mt-8">
<!-- First Card (bottom) -->
<div class="absolute inset-0 bg-white shadow-md rounded-lg p-4 border border-gray-200">
<h3 class="text-lg font-medium text-gray-900">Card One</h3>
<p class="text-gray-600 mt-2">This is the first card in the stack.</p>
</div>
<!-- Second Card (middle) -->
<div class="absolute inset-0 bg-white shadow-md rounded-lg p-4 border border-gray-200 transform translate-y-4 translate-x-4 w-5/6 h-5/6 z-10">
<h3 class="text-lg font-medium text-gray-900">Card Two</h3>
<p class="text-gray-600 mt-2">This is the second card in the stack.</p>
</div>
<!-- Third Card (top) -->
<div class="absolute inset-0 bg-white shadow-md rounded-lg p-4 border border-gray-200 transform translate-y-8 translate-x-8 w-2/3 h-2/3 z-20">
<h3 class="text-lg font-medium text-gray-900">Card Three</h3>
<p class="text-gray-600 mt-2">This is the third card in the stack.</p>
</div>
</div>
</div>