Stack Basic

                    <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>