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
Neumorphic_Charity_E-commerce_Component
Un componente de comercio electrónico complejo y receptivo diseñado para organizaciones benéficas/sin fines de lucro, con un estilo neumórfico suave con un esquema de color sepia/marrón y soporte para modo oscuro.
Componente de neumorfismo del comercio electrónico
Un componente de comercio electrónico receptivo diseñado en estilo Neumorphism con soporte para temas oscuros utilizando Tailwind CSS.
Tarjeta de producto Art Deco Geometric Marketplace
Un componente de tarjeta de producto para un mercado de múltiples proveedores, diseñado con patrones geométricos Art Deco y un esquema de colores de arco iris degradado. Las características incluyen diseño receptivo, soporte para modo oscuro y elementos interactivos.