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>
相关组件
Brutalism_Retro_Simple_E-commerce_Agriculture_Product_Card
一张简单的野兽派风格商品卡,适用于电子商务农业/农业网站,采用复古配色方案,包含商品图片、商品名称、价格和加入购物车按钮。设计具有响应能力和深色模式支持。
复古单色产品网格
一个简单的响应式复古/复古电子商务产品网格组件,采用单色紫色调色板的样式,并支持深色主题。该设计以基本布局和最少元素唤起了 80 年代/90 年代的怀旧之情,非常适合在线购物体验。