Componentes Caja de luz de imagen Componente de caja de luz de imagen

Componente de caja de luz de imagen

Un componente de caja de luz de imagen responsivo diseñado en modo oscuro usando Tailwind CSS. Cuenta con un fondo oscuro, efectos de opacidad y diseños receptivos para adaptarse a varios tamaños de pantalla.

Vista previa

Código HTML

<div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-75 hidden" id="lightbox">
    <div class="relative">
        <img src="https://picsum.photos/800/600" alt="Lightbox Image" class="rounded-lg shadow-lg">
        <button class="absolute top-2 right-2 text-white bg-gray-800 hover:bg-gray-700 rounded-full p-2 focus:outline-none" onclick="document.getElementById('lightbox').classList.add('hidden')">
            &times;
        </button>
    </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4">
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/200" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/201" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/202" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/203" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/204" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/205" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
</div>

Componentes relacionados

Componente de caja de luz de imagen

Un componente de caja de luz de imagen receptivo diseñado para el comercio electrónico con un estilo de diseño plano minimalista, que admite temas claros y oscuros utilizando Tailwind CSS.

Abrir

Componente de caja de luz de imagen

Un componente de caja de luz de imagen receptivo diseñado para el comercio electrónico, con soporte para modo oscuro y una combinación de colores en tonos tierra.

Abrir

Componente de caja de luz de imagen

Un componente de caja de luz de imagen responsivo con un tema retro/vintage que usa Tailwind CSS, admite el modo oscuro y presenta imágenes de marcador de posición.

Abrir