Product Cards Component

<div class="flex flex-wrap justify-center bg-gray-100 dark:bg-gray-900 py-8">
  <div class="m-4 max-w-sm bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg transform transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
    <div class="relative overflow-hidden">
      <img class="w-full h-48 object-cover transform transition-transform duration-500 hover:scale-110" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
      <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>
      <span class="absolute top-2 right-2 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-full">New</span>
    </div>
    <div class="p-6">
      <h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Awesome Product Name</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">This is a brief description of the amazing product.</p>
      <div class="flex items-center justify-between">
        <span class="text-2xl font-bold text-gray-900 dark:text-white">$199.99</span>
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 transform hover:scale-110">Add to Cart</button>
      </div>
    </div>
  </div>

  <div class="m-4 max-w-sm bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg transform transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
    <div class="relative overflow-hidden">
      <img class="w-full h-48 object-cover transform transition-transform duration-500 hover:scale-110" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
      <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>
      <span class="absolute top-2 right-2 bg-green-500 text-white text-xs font-bold px-3 py-1 rounded-full">Sale</span>
    </div>
    <div class="p-6">
      <h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Another Great Product</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">Here's a description for another fantastic product.</p>
      <div class="flex items-center justify-between">
        <span class="text-2xl font-bold text-gray-900 dark:text-white">$149.50</span>
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 transform hover:scale-110">Add to Cart</button>
      </div>
    </div>
  </div>

    <div class="m-4 max-w-sm bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg transform transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
    <div class="relative overflow-hidden">
      <img class="w-full h-48 object-cover transform transition-transform duration-500 hover:scale-110" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
      <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>

    </div>
    <div class="p-6">
      <h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Product with no tag</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">This is a product without a special tag.</p>
      <div class="flex items-center justify-between">
        <span class="text-2xl font-bold text-gray-900 dark:text-white">$99.00</span>
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 transform hover:scale-110">Add to Cart</button>
      </div>
    </div>
  </div>

</div>