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.
Código HTML
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4 text-center text-gray-800 dark:text-gray-200">Product Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product 1">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
</div>
</div>
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product 2">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
</div>
</div>
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product 3">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
</div>
</div>
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=4" alt="Product 4">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 4</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 4.</p>
</div>
</div>
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=5" alt="Product 5">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 5</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 5.</p>
</div>
</div>
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=6" alt="Product 6">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 6</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 6.</p>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de la galería de productos
Un componente de galería de productos receptivo diseñado para la interfaz de usuario del modo oscuro, con colores complementarios, adecuado para interfaces de redes sociales.
Componente de la galería de productos
Un componente de galería de productos simple y receptivo con tonos tierra, optimizado para el modo oscuro y el consumo de contenido. Ideal para blogs o sitios de comercio electrónico que muestran artículos.
Watercolor_Artistic_Dating_Product_Gallery
Un componente de galería de productos complejo y receptivo con un estilo de diseño 'Acuarela/Artístico' y una combinación de colores 'Dulce/Dulce', adecuado para citas y plataformas sociales. Cuenta con múltiples elementos interactivos, compatibilidad con modo oscuro y HTML semántico.