Componentes de comercio electrónico
Un componente de comercio electrónico de complejidad moderada con un diseño de modo oscuro que utiliza colores en tonos tierra para una exhibición de portafolio.
Código HTML
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold mb-4">Featured Products</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-700 hover:bg-gray-600 transition rounded-lg overflow-hidden">
<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-medium mb-2">Product Title 1</h3>
<p class="text-gray-300 mb-4">Brief description of the product.</p>
<span class="text-yellow-500 font-bold">$29.99</span>
<button class="mt-4 w-full py-2 bg-yellow-600 hover:bg-yellow-500 rounded transition">Add to Cart</button>
</div>
</div>
<div class="bg-gray-700 hover:bg-gray-600 transition rounded-lg overflow-hidden">
<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-medium mb-2">Product Title 2</h3>
<p class="text-gray-300 mb-4">Brief description of the product.</p>
<span class="text-yellow-500 font-bold">$49.99</span>
<button class="mt-4 w-full py-2 bg-yellow-600 hover:bg-yellow-500 rounded transition">Add to Cart</button>
</div>
</div>
<div class="bg-gray-700 hover:bg-gray-600 transition rounded-lg overflow-hidden">
<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-medium mb-2">Product Title 3</h3>
<p class="text-gray-300 mb-4">Brief description of the product.</p>
<span class="text-yellow-500 font-bold">$19.99</span>
<button class="mt-4 w-full py-2 bg-yellow-600 hover:bg-yellow-500 rounded transition">Add to Cart</button>
</div>
</div>
</div>
</div>
Componentes relacionados
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.
Ficha de producto de comercio electrónico neumórfico
Un componente de tarjeta de producto de comercio electrónico de estilo UI (Neumorphism) suave con colores en escala de grises, diseñado para sitios web comerciales / corporativos. Cuenta con una imagen del producto, título, precio y un botón 'Agregar al carrito', totalmente receptivo y con soporte para modo oscuro.
Componente de componentes de comercio electrónico
Componente de comercio electrónico para un sitio web comercial minimalista, con diseño responsivo y soporte de temas oscuros.