rejilla de productos retro-monocromo
Un componente de cuadrícula de productos de comercio electrónico retro/vintage simple y receptivo diseñado en una paleta violeta monocromática con soporte para temas oscuros. El diseño evoca la nostalgia de los años 80/90 con un diseño básico y elementos mínimos, perfecto para las experiencias de compra en línea.
Código 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>Componentes relacionados
Componente de componentes de comercio electrónico
Un componente de comercio electrónico brutalista para un blog, con una combinación de colores vibrantes y una complejidad moderada. Incluye un diseño responsivo con soporte para temas oscuros utilizando Tailwind CSS.
Componente de componentes de comercio electrónico
Un componente de comercio electrónico receptivo diseñado para el modo oscuro con una combinación de colores triádica, con listados de productos, un icono de carrito de compras y un avatar de usuario.
Componente de panel de comercio electrónico
Componente de panel de comercio electrónico con skeuomorfismo, colores vibrantes y diseño simple para Tailwind CSS, con soporte de tema oscuro y receptivo.