Product Grid Item

<div class="w-full sm:w-64 p-3">
  <div class="bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
    <div class="aspect-square p-4 bg-gray-50 rounded-t-lg">
      <img src="https://www.kruidvat.nl/medicas/sys_master/prd-images/h65/h71/34653530390558/prd-front-6162917-1_600x600/prd-front-6162917-1-600x600.jpg" alt="Product" class="w-full h-full object-contain" loading="lazy" />
    </div>
    <div class="p-4">
      <h3 class="text-lg font-semibold text-gray-800 mb-2">Product Name</h3>
      <p class="text-gray-600 text-sm mb-3">Product description goes here</p>
      <div class="flex items-center justify-between">
        <span class="text-xl font-bold text-gray-900">€12.99</span>
        <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2
          rounded-md text-sm font-medium transition-colors
          duration-200">Add to Cart</button>
      </div>
    </div>
  </div>
</div>