复古单色产品网格
一个简单的响应式复古/复古电子商务产品网格组件，采用单色紫色调色板的样式，并支持深色主题。该设计以基本布局和最少元素唤起了 80 年代/90 年代的怀旧之情，非常适合在线购物体验。
HTML 代码
<!-- Retro Monochromatic E-Commerce Product Grid -->
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card 1 -->
<div class="bg-violet-100 dark:bg-violet-900 p-4 rounded-lg border-2 border-violet-900 dark:border-violet-100 shadow-md">
<img src="https://picsum.photos/seed/p1/300/200" alt="Retro T-Shirt" class="w-full h-48 object-cover rounded mb-4 border-2 border-violet-900 dark:border-violet-100">
<h2 class="text-xl font-bold text-violet-900 dark:text-violet-100 mb-2">Retro T-Shirt</h2>
<p class="text-lg text-violet-900 dark:text-violet-100 mb-4">$29.99</p>
<button class="w-full py-2 bg-violet-900 text-violet-100 rounded hover:bg-violet-700 transition">Add to Cart</button>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Seller Avatar" class="w-8 h-8 rounded-full border-2 border-violet-900 dark:border-violet-100 mr-2">
<span class="text-sm text-violet-900 dark:text-violet-100">VintageCo</span>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-violet-100 dark:bg-violet-900 p-4 rounded-lg border-2 border-violet-900 dark:border-violet-100 shadow-md">
<img src="https://picsum.photos/seed/p2/300/200" alt="Vintage Camera" class="w-full h-48 object-cover rounded mb-4 border-2 border-violet-900 dark:border-violet-100">
<h2 class="text-xl font-bold text-violet-900 dark:text-violet-100 mb-2">Vintage Camera</h2>
<p class="text-lg text-violet-900 dark:text-violet-100 mb-4">$149.00</p>
<button class="w-full py-2 bg-violet-900 text-violet-100 rounded hover:bg-violet-700 transition">Add to Cart</button>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/lego/2.jpg" alt="Seller Avatar" class="w-8 h-8 rounded-full border-2 border-violet-900 dark:border-violet-100 mr-2">
<span class="text-sm text-violet-900 dark:text-violet-100">90sShop</span>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-violet-100 dark:bg-violet-900 p-4 rounded-lg border-2 border-violet-900 dark:border-violet-100 shadow-md">
<img src="https://picsum.photos/seed/p3/300/200" alt="Cassette Player" class="w-full h-48 object-cover rounded mb-4 border-2 border-violet-900 dark:border-violet-100">
<h2 class="text-xl font-bold text-violet-900 dark:text-violet-100 mb-2">Cassette Player</h2>
<p class="text-lg text-violet-900 dark:text-violet-100 mb-4">$49.50</p>
<button class="w-full py-2 bg-violet-900 text-violet-100 rounded hover:bg-violet-700 transition">Add to Cart</button>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/lego/3.jpg" alt="Seller Avatar" class="w-8 h-8 rounded-full border-2 border-violet-900 dark:border-violet-100 mr-2">
<span class="text-sm text-violet-900 dark:text-violet-100">RetroWave</span>
</div>
</div>
</div>
</div>