Componentes Galería Componente de galería

Componente de galería

Un componente de galería responsivo con un estilo de diseño 3D, que presenta profundidad y compromiso a través de efectos de sombra y desplazamiento. Admite temas oscuros y claros.

Vista previa

Código HTML

<div class="max-w-7xl mx-auto p-6">
    <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=1" alt="Gallery Item 1" class="w-full h-auto rounded-lg" />
            <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <span class="text-white font-semibold text-lg">Gallery Item 1</span>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=2" alt="Gallery Item 2" class="w-full h-auto rounded-lg" />
            <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <span class="text-white font-semibold text-lg">Gallery Item 2</span>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=3" alt="Gallery Item 3" class="w-full h-auto rounded-lg" />
            <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <span class="text-white font-semibold text-lg">Gallery Item 3</span>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=4" alt="Gallery Item 4" class="w-full h-auto rounded-lg" />
            <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <span class="text-white font-semibold text-lg">Gallery Item 4</span>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=5" alt="Gallery Item 5" class="w-full h-auto rounded-lg" />
            <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <span class="text-white font-semibold text-lg">Gallery Item 5</span>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=6" alt="Gallery Item 6" class="w-full h-auto rounded-lg" />
            <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <span class="text-white font-semibold text-lg">Gallery Item 6</span>
            </div>
        </div>
    </div>
</div>
<style>
    .dark { background-color: #1a202c; }
    .dark .text-gray-900 { color: white; }
</style>

Componentes relacionados

Componente de galería

Un componente de galería simple que usa Tailwind CSS, implementa un estilo de diseño brutalista con un esquema de color triádico y soporte de tema oscuro para mostrar trabajos o productos.

Abrir

Galería de productos de comercio electrónico

Un componente de galería complejo, responsivo y compatible con temas oscuros con un diseño minimalista, una combinación de colores complementaria y múltiples elementos interactivos adecuados para el comercio electrónico.

Abrir

Componente de galería

Un componente de galería de estilo Neumorphism con tonos tierra para fines de blog/contenido. Este componente cuenta con una interfaz enriquecida con múltiples elementos interactivos, diseño responsivo y compatibilidad con temas oscuros.

Abrir