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 receptivo diseñado para el comercio electrónico, con soporte para modo oscuro y una combinación de colores en tonos tierra.

Vista previa

Código HTML

<div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75 hidden dark:block" id="lightbox">
    <div class="relative bg-gray-800 rounded-lg overflow-hidden shadow-lg">
        <button class="absolute top-3 right-3 text-white focus:outline-none" onclick="document.getElementById('lightbox').classList.add('hidden')">&times;</button>
        <img class="w-full h-auto" src="https://picsum.photos/800/600" alt="Product Image">
        <div class="p-4">
            <div class="flex items-center space-x-3">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                <div class="text-white">
                    <p class="text-sm font-semibold">John Doe</p>
                    <p class="text-xs text-gray-400">E-commerce Store</p>
                </div>
            </div>
            <p class="mt-2 text-xs text-gray-300">Image description or product details can go here.</p>
        </div>
    </div>
</div>

<div class="flex justify-center py-6">
    <button class="bg-green-600 text-white py-2 px-4 rounded-lg focus:outline-none hover:bg-green-500" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        Open Lightbox
    </button>
</div>

Componentes relacionados

Componente de caja de luz de imagen

Un componente de caja de luz de imagen lúdico y divertido para CRM/Business Tools, con un esquema de color en escala de grises, elementos redondeados y una interfaz compleja para la visualización interactiva de imágenes. Totalmente receptivo con soporte para modo oscuro.

Abrir

Componente de caja de luz de imagen retro

Un componente de caja de luz de imagen simple y receptivo con diseño retro / vintage, combinación de colores análoga y soporte de modo oscuro, adecuado para blogs y sitios de contenido.

Abrir

Componente de caja de luz de imagen

Un componente de caja de luz de imagen sensible con soporte para modo oscuro. Este componente muestra una galería de imágenes y, al hacer clic en una imagen, se abre un modal de pantalla completa con flechas de navegación para navegar por las imágenes. Cuenta con un botón de cierre y utiliza colores vibrantes para resaltar elementos interactivos. El diseño se adapta a un contexto empresarial/corporativo, lo que garantiza una experiencia de usuario profesional pero atractiva.

Abrir