Premium Product Card with Video

<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-lg hover:scale-105 transition-all duration-300 group max-w-[400px] mx-auto">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); .font-quicksand { font-family: 'Quicksand', sans-serif; } .jelly-btn { position: relative; border: none; border-radius: 45px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; color: white; font-family: 'Quicksand', sans-serif; font-weight: 500; text-decoration: none; } .jelly-btn::before { width: 70%; height: 2px; position: absolute; background-color: rgba(250, 250, 250, 0.678); content: ""; filter: blur(1px); top: 7px; border-radius: 50%; } .jelly-btn::after { width: 70%; height: 2px; position: absolute; background-color: rgba(250, 250, 250, 0.137); content: ""; filter: blur(1px); bottom: 7px; border-radius: 50%; } .jelly-btn:hover { animation: jello-horizontal 0.9s both; transform: translateY(-2px); } @keyframes jello-horizontal { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } 100% { transform: scale3d(1, 1, 1); } } .jelly-btn-primary { background-color: rgb(151, 95, 255); box-shadow: rgb(210, 187, 253) 0px 10px 10px inset, rgba(5, 5, 5, 0.21) 0px 5px 10px, rgb(124, 54, 255) 0px -10px 10px inset; } .jelly-btn-secondary { background-color: rgb(102, 179, 171); box-shadow: rgb(154, 207, 200) 0px 10px 10px inset, rgba(5, 5, 5, 0.21) 0px 5px 10px, rgb(81, 158, 150) 0px -10px 10px inset; }
  </style>
  <div class="aspect-[4/3] overflow-hidden bg-gray-50 relative">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/17ca7bce-950d-46a7-bf7d-a39f0133e556_800w.jpg" alt="Organic Matcha Latte" class="h-full w-full transition group-hover:scale-105 object-cover">
  </div>
  <div class="p-6 bg-white">
    <div class="flex items-center justify-between mb-2">
      <h3 class="text-lg font-semibold text-gray-900 font-quicksand">Organic Matcha Latte</h3>
      <span class="text-lg font-semibold text-gray-900 font-quicksand">$6.50</span>
    </div>
    <p class="text-sm text-gray-700 mb-4 font-quicksand">
      Premium ceremonial-grade matcha with choice of oat, almond, or soy milk. Naturally sweet and energizing.
    </p>
    <div class="flex items-center gap-2 mb-4">
      <span class="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2 py-1 text-xs text-emerald-700 font-quicksand">
        Organic
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="leaf" class="h-3 w-3">
          <path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"></path>
          <path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"></path>
        </svg>
      </span>
      <span class="inline-flex items-center gap-1 rounded-full bg-blue-100 px-2 py-1 text-xs text-blue-700 font-quicksand">
        Caffeine
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap" class="h-3 w-3">
          <path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path>
        </svg>
      </span>
    </div>
    <button class="jelly-btn jelly-btn-primary w-full gap-2 text-sm font-quicksand" style="height: 44px;">
      Add to cart
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="shopping-cart" class="h-4 w-4 transition group-hover:scale-105">
        <circle cx="9" cy="21" r="1"></circle>
        <circle cx="20" cy="21" r="1"></circle>
        <path d="m1 1 4 4 4.36 13.18a2 2 0 0 0 1.93 1.5h11.31"></path>
        <path d="M7 8h15l-1.5 6h-12.5"></path>
      </svg>
    </button>
  </div>
</div>