Product Cards

<!--
  Day 41: Product Cards

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

<!-- Product Cards -->
<div
  class="mx-auto grid w-full max-w-4xl grid-cols-1 gap-6 rounded-3xl bg-white/40 p-6 shadow-sm shadow-gray-300 backdrop-blur-xs lg:grid-cols-3"
  style="--product-info-height: 9rem; --product-actions-height: 7.5rem"
>
  <!-- Product Card -->
  <div
    class="group relative overflow-hidden rounded-2xl pb-[var(--product-info-height)] shadow-sm shadow-gray-200"
  >
    <!-- Product Image -->
    <img
      src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt="Product Image"
      class="aspect-square w-full object-cover group-focus-within:opacity-50 group-hover:opacity-50"
    />
    <!-- END Product Image -->

    <!-- Product Info -->
    <div
      class="absolute inset-x-0 bottom-0 bg-white transition duration-200 ease-out group-focus-within:-translate-y-[var(--product-actions-height)] group-hover:-translate-y-[var(--product-actions-height)]"
    >
      <div
        class="flex h-[var(--product-info-height)] flex-col justify-between p-5"
      >
        <div>
          <h3 class="font-semibold">Creative Kraken 7.1</h3>
          <p class="text-sm text-gray-600">Technology</p>
        </div>
        <div class="text-xl font-semibold">
          <div>$199</div>
        </div>
      </div>
    </div>
    <!-- END Product Info -->

    <!-- Product Actions -->
    <div
      class="absolute inset-x-0 bottom-0 flex h-[var(--product-actions-height)] translate-y-full flex-col justify-between bg-white px-5 pb-5 transition duration-200 ease-out group-focus-within:translate-y-0 group-hover:translate-y-0"
    >
      <button
        type="button"
        class="flex w-full items-center justify-center gap-2 rounded-lg border border-indigo-800 bg-indigo-800 px-4 py-3 text-sm leading-5 font-medium text-white hover:border-indigo-900 hover:bg-indigo-900 hover:text-white focus:ring-2 focus:ring-indigo-500/50 focus:outline-hidden active:border-indigo-700 active:bg-indigo-700"
      >
        <span>Add to Cart</span>
      </button>
      <button
        type="button"
        class="flex w-full items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-4 py-3 text-sm leading-5 font-medium text-white hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:ring-2 focus:ring-zinc-500/50 focus:outline-hidden active:border-zinc-700 active:bg-zinc-700"
      >
        <span>View Details</span>
      </button>
    </div>
    <!-- Product Actions -->
  </div>
  <!-- END Product Card -->

  <!-- Product Card -->
  <div
    class="group relative overflow-hidden rounded-2xl pb-[var(--product-info-height)] shadow-sm shadow-gray-200"
  >
    <!-- Product Image -->
    <img
      src="https://images.unsplash.com/photo-1547949003-9792a18a2601?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt="Product Image"
      class="aspect-square w-full object-cover group-focus-within:opacity-50 group-hover:opacity-50"
    />
    <!-- END Product Image -->

    <!-- Product Info -->
    <div
      class="absolute inset-x-0 bottom-0 bg-white transition duration-200 ease-out group-focus-within:-translate-y-[var(--product-actions-height)] group-hover:-translate-y-[var(--product-actions-height)]"
    >
      <div
        class="flex h-[var(--product-info-height)] flex-col justify-between p-5"
      >
        <div>
          <h3 class="font-semibold">Expedition Backpack</h3>
          <p class="text-sm text-gray-600">Outdoors</p>
        </div>
        <div class="text-xl font-semibold">
          <div>$269</div>
        </div>
      </div>
    </div>
    <!-- END Product Info -->

    <!-- Product Actions -->
    <div
      class="absolute inset-x-0 bottom-0 flex h-[var(--product-actions-height)] translate-y-full flex-col justify-between bg-white px-5 pb-5 transition duration-200 ease-out group-focus-within:translate-y-0 group-hover:translate-y-0"
    >
      <button
        type="button"
        class="flex w-full items-center justify-center gap-2 rounded-lg border border-indigo-800 bg-indigo-800 px-4 py-3 text-sm leading-5 font-medium text-white hover:border-indigo-900 hover:bg-indigo-900 hover:text-white focus:ring-2 focus:ring-indigo-500/50 focus:outline-hidden active:border-indigo-700 active:bg-indigo-700"
      >
        <span>Add to Cart</span>
      </button>
      <button
        type="button"
        class="flex w-full items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-4 py-3 text-sm leading-5 font-medium text-white hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:ring-2 focus:ring-zinc-500/50 focus:outline-hidden active:border-zinc-700 active:bg-zinc-700"
      >
        <span>View Details</span>
      </button>
    </div>
    <!-- Product Actions -->
  </div>
  <!-- END Product Card -->

  <!-- Product Card -->
  <div
    class="group relative overflow-hidden rounded-2xl pb-[var(--product-info-height)] shadow-sm shadow-gray-200"
  >
    <!-- Product Image -->
    <img
      src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt="Product Image"
      class="aspect-square w-full object-cover group-focus-within:opacity-50 group-hover:opacity-50"
    />
    <!-- END Product Image -->

    <!-- Product Info -->
    <div
      class="absolute inset-x-0 bottom-0 bg-white transition duration-200 ease-out group-focus-within:-translate-y-[var(--product-actions-height)] group-hover:-translate-y-[var(--product-actions-height)]"
    >
      <div
        class="flex h-[var(--product-info-height)] flex-col justify-between p-5"
      >
        <div>
          <h3 class="font-semibold">Nike Air 360</h3>
          <p class="text-sm text-gray-600">Shoes</p>
        </div>
        <div class="text-xl font-semibold">
          <div>$159</div>
        </div>
      </div>
    </div>
    <!-- END Product Info -->

    <!-- Product Actions -->
    <div
      class="absolute inset-x-0 bottom-0 flex h-[var(--product-actions-height)] translate-y-full flex-col justify-between bg-white px-5 pb-5 transition duration-200 ease-out group-focus-within:translate-y-0 group-hover:translate-y-0"
    >
      <button
        type="button"
        class="flex w-full items-center justify-center gap-2 rounded-lg border border-indigo-800 bg-indigo-800 px-4 py-3 text-sm leading-5 font-medium text-white hover:border-indigo-900 hover:bg-indigo-900 hover:text-white focus:ring-2 focus:ring-indigo-500/50 focus:outline-hidden active:border-indigo-700 active:bg-indigo-700"
      >
        <span>Add to Cart</span>
      </button>
      <button
        type="button"
        class="flex w-full items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-4 py-3 text-sm leading-5 font-medium text-white hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:ring-2 focus:ring-zinc-500/50 focus:outline-hidden active:border-zinc-700 active:bg-zinc-700"
      >
        <span>View Details</span>
      </button>
    </div>
    <!-- Product Actions -->
  </div>
  <!-- END Product Card -->
</div>
<!-- END Product Cards -->