Social Media E-commerce Card

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex flex-wrap items-center justify-center">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 m-4">
    <div class="relative">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/social1/400/300" alt="Product Image">
      <div class="absolute top-0 right-0 bg-black bg-opacity-50 text-white text-xs font-bold px-3 py-1 m-2 rounded-full">Featured</div>
    </div>
    <div class="p-6">
      <div class="flex items-center justify-between mb-4">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of Jonathan Reinink">
          <div class="text-sm">
            <p class="text-gray-900 dark:text-white leading-none">Jonathan Reinink</p>
            <p class="text-gray-600 dark:text-gray-400">Aug 14</p>
          </div>
        </div>
        <button class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-white">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
          </svg>
        </button>
      </div>
      <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Product Title</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-gray-900 dark:text-white">$19.99</span>
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Add to Cart</button>
      </div>
      <div class="mt-4 flex items-center">
        <button class="flex items-center text-gray-700 dark:text-gray-300 mr-4">
          <svg class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
          </svg>
          <span>24 Likes</span>
        </button>
        <button class="flex items-center text-gray-700 dark:text-gray-300">
          <svg class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.913 9.913 0 01-3.981-.82A10.022 10.022 0 003 4.636v0a10.029 10.029 0 011.021-.304A10.021 10.021 0 0012 21c4.97 0 9-3.582 9-8z"></path>
          </svg>
          <span>12 Comments</span>
        </button>
      </div>
    </div>
  </div>
</div>