Componente de la galería de productos
Un componente de galería de productos responsivo con una estética de Material Design, con un diseño basado en cuadrículas y elementos interactivos adecuados para exhibir productos o un portafolio. Incluye soporte para el modo oscuro y utiliza un esquema de color análogo.
Código HTML
<div class="container mx-auto p-4"">
<!-- Product Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover"">
<div class="p-4"">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-3"">
<span class="text-xl font-bold text-gray-900 dark:text-white"">$49.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover"">
<div class="p-4"">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-3"">
<span class="text-xl font-bold text-gray-900 dark:text-white"">$29.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover"">
<div class="p-4"">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-3"">
<span class="text-xl font-bold text-gray-900 dark:text-white"">$79.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
<img src="https://picsum.photos/seed/product4/400/300" alt="Product Image" class="w-full h-48 object-cover"">
<div class="p-4"">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 4</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-3"">
<span class="text-xl font-bold text-gray-900 dark:text-white"">$19.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</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
Un componente simple de la galería de productos diseñado con elementos 3D para la profundidad, utilizando un esquema de color triádico. Es responsivo y admite temas oscuros, adecuados para mostrar trabajos o productos.
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.