Add to Cart Button

<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800 transition-colors duration-300">
  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg px-5 py-4 transition-transform duration-300 hover:scale-105">
    <img src="https://picsum.photos/200/200" alt="Product Image" class="w-full h-40 object-cover rounded-md mb-4">
    <h2 class="text-lg font-semibold dark:text-white">Product Name</h2>
    <p class="text-gray-700 dark:text-gray-300 mb-4">This is a brief description of the product.</p>
    <div class="flex items-center justify-between">
      <span class="text-xl font-bold dark:text-white">$19.99</span>
      <button class="bg-blue-600 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-600">
        Add to Cart
      </button>
    </div>
  </div>
</div>