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
Componente de la galería de productos - Diseño de materiales
Un componente de la galería de productos inspirado en Material Design con diseño responsivo, efectos de desplazamiento y compatibilidad con temas oscuros. Utiliza Tailwind CSS.
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 responsivo simple diseñado con los principios de Material Design, con colores vibrantes y soporte para modo oscuro, adecuado para un tablero. Este componente utiliza Tailwind CSS para el estilo.