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.
Código HTML
<div class="bg-gray-900 text-white min-h-screen p-8">
<header class="flex justify-between items-center mb-8">
<h1 class="text-3xl font-bold">ShopEase</h1>
<div class="relative">
<button class="bg-blue-600 p-2 rounded-full hover:bg-blue-500 focus:outline-none">
<svg class="w-6 h-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 2H7v2h6a1 1 0 011 1v12a1 1 0 01-1 1H7a1 1 0 01-1-1v-6H4v7a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"/></svg>
</button>
<span class="absolute top-0 right-0 bg-red-600 text-white text-xs font-bold rounded-full px-1">3</span>
</div>
</header>
<main class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/200/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold">Product Title</h2>
<p class="text-gray-400">$29.99</p>
<button class="mt-2 bg-green-600 text-white py-1 px-4 rounded hover:bg-green-500 focus:outline-none">Add to Cart</button>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/200/300?random=1" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold">Another Product</h2>
<p class="text-gray-400">$54.99</p>
<button class="mt-2 bg-green-600 text-white py-1 px-4 rounded hover:bg-green-500 focus:outline-none">Add to Cart</button>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/200/300?random=2" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold">Cool Gadget</h2>
<p class="text-gray-400">$19.99</p>
<button class="mt-2 bg-green-600 text-white py-1 px-4 rounded hover:bg-green-500 focus:outline-none">Add to Cart</button>
</div>
</div>
</main>
<footer class="mt-10 text-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mx-auto mb-2">
<p class="font-semibold">Welcome, User!</p>
</footer>
</div>Componentes relacionados
Componente de componentes de comercio electrónico
Un componente de reserva/reserva simple y minimalista con un estilo de tipografía suiza/internacional, con un esquema de color en blanco y negro con un acento brillante. Es totalmente sensible y es compatible con el modo oscuro.
Componente de componentes de comercio electrónico
Una tarjeta de listado de bienes raíces simple y receptiva con un diseño inspirado en papel / impresión y una combinación de colores en tonos tierra, incluida la compatibilidad con el modo oscuro.
Componente de componentes de comercio electrónico
Un componente de comercio electrónico receptivo con microinteracciones, combinación de colores análoga y compatibilidad con temas oscuros.