Componente retro de comercio electrónico
Un componente complejo de comercio electrónico diseñado con un estilo retro / vintage, con un esquema de color triádico y un diseño receptivo, adecuado para sitios web comerciales / corporativos con soporte de modo oscuro.
Código HTML
<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
<div class="mb-4">
<h2 class="text-3xl font-bold text-center text-red-600 dark:text-red-400">Vintage E-commerce Store</h2>
<p class="text-center text-lg text-gray-700 dark:text-gray-300">Explore our curated collection of retro-inspired products</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product 1">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Retro Gadget</h3>
<p class="text-gray-600 dark:text-gray-400">Classic retro gadget from the 90s, perfect for nostalgia lovers!</p>
<span class="block text-lg font-bold text-red-600 dark:text-red-400">$29.99</span>
<button class="mt-2 w-full bg-red-600 dark:bg-red-400 text-white font-semibold py-2 rounded hover:bg-red-500 dark:hover:bg-red-300 transition">Add to Cart</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product 2">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Vintage Vinyl</h3>
<p class="text-gray-600 dark:text-gray-400">Experience music like it's the 80s with our vintage vinyl collection.</p>
<span class="block text-lg font-bold text-red-600 dark:text-red-400">$19.99</span>
<button class="mt-2 w-full bg-red-600 dark:bg-red-400 text-white font-semibold py-2 rounded hover:bg-red-500 dark:hover:bg-red-300 transition">Add to Cart</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product 3">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Classic Arcade Game</h3>
<p class="text-gray-600 dark:text-gray-400">Relive the golden age of gaming with our classic arcade machines!</p>
<span class="block text-lg font-bold text-red-600 dark:text-red-400">$99.99</span>
<button class="mt-2 w-full bg-red-600 dark:bg-red-400 text-white font-semibold py-2 rounded hover:bg-red-500 dark:hover:bg-red-300 transition">Add to Cart</button>
</div>
</div>
</div>
<div class="mt-8">
<h2 class="text-2xl font-bold text-center text-red-600 dark:text-red-400">Meet Our Team</h2>
<div class="flex flex-wrap justify-center space-x-4 mt-4">
<div class="flex flex-col items-center">
<img class="rounded-full w-24 h-24 shadow" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Team Member 1">
<h4 class="mt-2 text-gray-800 dark:text-gray-200">John Doe</h4>
</div>
<div class="flex flex-col items-center">
<img class="rounded-full w-24 h-24 shadow" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Team Member 2">
<h4 class="mt-2 text-gray-800 dark:text-gray-200">Jane Smith</h4>
</div>
<div class="flex flex-col items-center">
<img class="rounded-full w-24 h-24 shadow" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Team Member 3">
<h4 class="mt-2 text-gray-800 dark:text-gray-200">Bob Johnson</h4>
</div>
</div>
</div>
</div>Componentes relacionados
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.
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.
Componentes skeuomórficos de comercio electrónico
Un componente de comercio electrónico Skeuomorphic complejo, receptivo y monocromático para sitios web comerciales con soporte para modo oscuro.