Cards Stack with Hover Effect

<!--
  Day 22: Cards stack with hover effect

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Cards Stack -->
<a
  href="javascript:void(0)"
  class="group relative mx-auto flex w-full max-w-xs flex-col transition duration-125 active:opacity-75"
>
  <!-- Card Behind 1 -->
  <div
    class="absolute inset-0 origin-bottom -rotate-3 rounded-lg bg-white shadow-lg transition duration-150 group-hover:-translate-x-1 group-hover:-rotate-12"
  >
    <div class="p-4">
      <img
        src="https://images.unsplash.com/photo-1585409677983-0f6c41ca9c3b?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Mountain Image 1"
        class="aspect-4/3 w-full rounded-lg object-cover"
      />
    </div>
  </div>
  <!-- END Card Behind 1 -->

  <!-- Card Behind 2 -->
  <div
    class="absolute inset-0 origin-bottom rotate-3 rounded-lg bg-white shadow-lg transition duration-150 group-hover:translate-x-1 group-hover:rotate-12"
  >
    <div class="p-4">
      <img
        src="https://images.unsplash.com/photo-1589405858862-2ac9cbb41321?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Mountain Image 2"
        class="aspect-4/3 w-full rounded-lg object-cover"
      />
    </div>
  </div>
  <!-- END Card Behind 2 -->

  <!-- Card -->
  <div
    class="relative rounded-lg bg-white shadow-lg transition duration-150 group-hover:scale-105"
  >
    <div class="p-4">
      <img
        src="https://images.unsplash.com/photo-1519904981063-b0cf448d479e?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Mountain Image 3"
        class="aspect-4/3 w-full rounded-lg object-cover"
      />
    </div>
    <div class="px-4 pb-4">
      <h3 class="font-semibold">Mountain-trip-2024.jpg</h3>
      <h4 class="text-sm font-medium text-gray-600">2.3MB</h4>
    </div>
  </div>
  <!-- END Card -->
</a>
<!-- END Cards Stack -->