Componente de la galería de productos
Componente de galería de productos receptivo con soporte para temas oscuros, estilo de diseño de materiales, combinación de colores de tonos tierra, complejidad simple, para fines de comercio electrónico.
Código HTML
<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-gray-800 dark:text-gray-100">$29.99</span>
<button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-gray-800 dark:text-gray-100">$39.50</span>
<button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-gray-800 dark:text-gray-100">$19.00</span>
<button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de la galería de productos
Un componente de galería de productos con un diseño brutalista, una combinación de colores en escala de grises y una complejidad moderada. Está diseñado para un propósito de tablero y es receptivo con soporte para temas oscuros.
Componente de la galería de productos
Una galería de productos responsiva con un estilo retro / vintage, con una combinación de colores complementaria y diseñada para sitios web comerciales / corporativos con soporte para modo oscuro.
Componente de la galería de productos
Un componente de galería de productos receptivo que muestra artículos con microinteracciones atractivas y un enfoque en los tonos tierra.