HTML 代码
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
<div class="relative">
<img class="w-full h-48 object-cover object-center" src="https://picsum.photos/seed/retro-media/600/400" alt="Retro media visual">
<div class="absolute top-0 right-0 bg-yellow-400 text-gray-800 text-xs font-bold px-2 py-1 m-2 rounded-md">Featured</div>
</div>
<div class="px-6 py-4">
<h3 class="font-bold text-xl text-gray-800 dark:text-white mb-2">Awesome Product Title</h3>
<p class="text-gray-700 dark:text-gray-300 text-base">This is a brief description of the product, highlighting its key features and benefits in a retro style.</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-blue-500 rounded-full px-3 py-1 text-sm font-semibold text-white mr-2 mb-2">#retro</span>
<span class="inline-block bg-green-500 rounded-full px-3 py-1 text-sm font-semibold text-white mr-2 mb-2">#vintage</span>
<span class="inline-block bg-red-500 rounded-full px-3 py-1 text-sm font-semibold text-white mb-2">#ecommerce</span>
</div>
<div class="px-6 py-4 flex justify-between items-center bg-gray-100 dark:bg-gray-700">
<span class="font-bold text-xl text-gray-900 dark:text-white">$49.99</span>
<button class="bg-purple-600 hover:bg-purple-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>