Componente de la galería de productos
Componente de galería de productos responsivo con modo oscuro
Código HTML
<div class="bg-gray-900 py-10">
<div class="container mx-auto px-4">
<h2 class="text-pastel-light mb-8 text-3xl font-bold text-center">Product Gallery</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product 1" class="rounded-md mb-4 w-full">
<h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 1</h3>
<p class="text-pastel-light text-sm mb-4">A brief description of Product 1.</p>
<button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product 2" class="rounded-md mb-4 w-full">
<h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 2</h3>
<p class="text-pastel-light text-sm mb-4">A brief description of Product 2.</p>
<button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product 3" class="rounded-md mb-4 w-full">
<h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 3</h3>
<p class="text-pastel-light text-sm mb-4">A brief description of Product 3.</p>
<button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
</div>
</div>
</div>
</div>Componentes relacionados
LujoMonocromáticoProductoGalería
Un componente de galería de productos simple y elegante con un esquema de color monocromático, diseñado para plataformas de música/audio. Cuenta con capacidad de respuesta completa y compatibilidad con el modo oscuro.
Componente de la galería de productos
Componente de la galería de productos basado en los principios de Material Design, con diseño responsivo y soporte para temas oscuros. Incluye imágenes de marcador de posición.
Componente de la galería de productos
Un componente de galería de productos receptivo diseñado con los principios de Material Design, con colores en tonos tierra, adecuado para tableros y compatible con el modo oscuro.