Componente de galería
Un componente de galería responsivo con microinteracciones para redes sociales, diseñado con un tema oscuro y un diseño simple usando Tailwind CSS.
Código HTML
<div class="container mx-auto p-4">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=1" alt="Gallery image 1" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-blue-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="font-bold">John Doe</span>
</div>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/201?random=2" alt="Gallery image 2" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-green-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="font-bold">Jane Smith</span>
</div>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/202?random=3" alt="Gallery image 3" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-purple-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="font-bold">Michael Johnson</span>
</div>
</div>
</div>
<!-- Repeat as necessary for more images -->
</div>
</div>
Componentes relacionados
Componente de galería
Un componente de galería de imágenes simple y receptivo diseñado para sitios web comerciales / corporativos, con un esquema de color triádico inspirado en los principios de Material Design. Incluye un tema oscuro para las preferencias del usuario y utiliza un diseño basado en cuadrículas.
3D_Muted_Gallery_Component
Un componente de galería complejo y receptivo con una estética de diseño 3D, combinación de colores apagados y compatibilidad con modo oscuro, adecuado para un blog o consumo de contenido.
Galería de imágenes minimalistas en sepia para reservas
Un componente de galería de imágenes de diseño minimalista y plano con cálidos tonos sepia/marrón, adecuado para sistemas de reserva y reservas. Cuenta con un diseño responsivo y compatibilidad con el modo oscuro.