Product Quick View Card

<div class="w-full max-w-xs mx-auto">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');</style>
  <div class="bg-white rounded-xl shadow-md overflow-hidden group relative" style="font-family: 'Inter', 'Helvetica Neue', sans-serif;">
    <div class="relative overflow-hidden">
      <img src="https://www.etos.nl/dw/image/v2/BCTN_PRD/on/demandware.static/-/Sites-etos-master-catalog/default/dw52c474cf/images/120558691/120558691_MCM_PACK_1311435.jpg?sw=800&sfrm=png&q=75" alt="Product" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105" loading="lazy" />
      <div class="absolute inset-0 bg-gradient-to-t from-black/60
        to-transparent opacity-0 group-hover:opacity-100
        transition-opacity duration-300 flex items-end
        justify-center pb-6">
        <button class="bg-white hover:bg-gray-100 text-gray-900 font-medium py-2
          px-6 rounded-full transition-colors duration-200 transform
          translate-y-4 group-hover:translate-y-0">Quick View</button>
      </div>
    </div>
    <div class="p-4">
      <h3 class="text-lg font-semibold text-gray-900 mb-1">Product Name</h3>
      <p class="text-sm text-gray-500">€29.99</p>
    </div>
  </div>
</div>