HTML 代码
<div class="max-w-sm rounded overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-800">
<img class="w-full" src="https://picsum.photos/seed/retro1/400/300" alt="Retro product image">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-gray-900 dark:text-white">Retro Collectible</div>
<p class="text-gray-700 dark:text-gray-300 text-base">
A truly unique retro item that brings back memories of a bygone era. Perfect for collectors and enthusiasts.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2 mb-2">#retro</span>
<span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2 mb-2">#vintage</span>
<span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">#collectible</span>
</div>
<div class="px-6 py-4 flex items-center justify-between">
<span class="font-bold text-xl 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 dark:bg-blue-700 dark:hover:bg-blue-600">
Add to Cart
</button>
</div>
</div>