Interactive Components Component

    
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg w-96">
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title</h2>
      <span class="text-lg font-bold text-green-500 dark:text-green-400">$49.99</span>
    </div>
    <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum/400/300" alt Light Pink Product Image">
    <p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of the product goes here. It should be concise and informative.</p>
    <button class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-600">Add to Cart</button>
  </div>
</div>