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
Ficha de producto de comercio electrónico retro
Una tarjeta de producto de comercio electrónico retro / vintage con diseño receptivo y 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.
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.