Componente de galería
Componente de galería responsivo con soporte para modo oscuro
Código HTML
<div class="bg-gray-100 dark:bg-gray-900 py-8">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<!-- Gallery Item 1 -->
<div class="relative overflow-hidden rounded-lg shadow-lg group">
<img src="https://picsum.photos/600/400?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p class="text-white text-xl font-semibold">Project Title 1</p>
</div>
</div>
<!-- Gallery Item 2 -->
<div class="relative overflow-hidden rounded-lg shadow-lg group">
<img src="https://picsum.photos/600/400?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p class="text-white text-xl font-semibold">Project Title 2</p>
</div>
</div>
<!-- Gallery Item 3 -->
<div class="relative overflow-hidden rounded-lg shadow-lg group">
<img src="https://picsum.photos/600/400?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p class="text-white text-xl font-semibold">Project Title 3</p>
</div>
</div>
<!-- Gallery Item 4 -->
<div class="relative overflow-hidden rounded-lg shadow-lg group">
<img src="https://picsum.photos/600/400?random=4" alt="Gallery Image 4" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p class="text-white text-xl font-semibold">Project Title 4</p>
</div>
</div>
<!-- Gallery Item 5 -->
<div class="relative overflow-hidden rounded-lg shadow-lg group">
<img src="https://picsum.photos/600/400?random=5" alt="Gallery Image 5" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p class="text-white text-xl font-semibold">Project Title 5</p>
</div>
</div>
<!-- Gallery Item 6 -->
<div class="relative overflow-hidden rounded-lg shadow-lg group">
<img src="https://picsum.photos/600/400?random=6" alt="Gallery Image 6" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p class="text-white text-xl font-semibold">Project Title 6</p>
</div>
</div>
</div>
</div>
</div>
Componentes relacionados
Componente de galería
Un componente de galería interactivo diseñado en Material Design con un esquema de color análogo para un propósito.
Componente de galería minimalista
Un componente de galería de imágenes responsivo y minimalista con un esquema de color cálido/atardecer, adecuado para aplicaciones de tecnología/SaaS. Incluye soporte para modo oscuro.
Componente de la Galería Brutalista
Un componente de galería receptivo inspirado en el brutalismo para plataformas de entretenimiento, con neutros fríos de alto contraste y compatibilidad con el modo oscuro.