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
Componente de galería de productos receptivo con soporte para modo oscuro
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 con una interfaz de usuario oscura, combinación de colores sepia/marrón, adecuado para sitios web comerciales/corporativos. Incluye varias tarjetas de producto con imágenes, títulos, descripciones y precios, y es compatible con el modo oscuro.