Media Components Component

<div class="max-w-xs mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
  <div class="relative">
    <img class="object-cover w-full h-48 transition-transform duration-300 transform group-hover:scale-105" src="https://picsum.photos/400/300?random=1"
      alt="Product Image">
    <div
      class="absolute top-0 left-0 flex items-center justify-center w-full h-full text-white transition-opacity duration-300 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100">
      <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
        </path>
      </svg>
    </div>
  </div>
  <div class="px-4 py-3">
    <h3 class="text-lg font-medium text-gray-800 dark:text-white">Product Name</h3>
    <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Short product description goes here.</p>
    <div class="flex items-center justify-between mt-3">
      <span class="text-xl font-bold text-gray-800 dark:text-white">$29.99</span>
      <button
        class="px-3 py-2 text-xs font-medium text-white uppercase transition-colors duration-300 transform bg-gray-800 rounded hover:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:bg-gray-700 dark:focus:bg-gray-600">
        Add to Cart
      </button>
    </div>
  </div>
</div>