Componenti Immagine Lightbox Componente Lightbox immagine

Componente Lightbox immagine

Un componente Image Lightbox reattivo progettato per l'e-commerce, con supporto per la modalità scura e una combinazione di colori dei toni della terra.

Anteprima

Codice 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>

Componenti correlati

Componente Lightbox immagine

Un componente lightbox per immagini scheumorfiche progettato per imitare le controparti del mondo reale, con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.

Aperto

Componente Lightbox immagine

Un componente lightbox per immagini reattivo con un design piatto minimalista, una combinazione di colori monocromatica e una complessità moderata, adatto per le interfacce dei social media. Supporta un tema scuro utilizzando il prefisso dark: di Tailwind CSS e non richiede JavaScript. Le immagini provengono da picsum.photos.

Aperto

Componente Lightbox immagine

Un componente lightbox per immagini reattivo progettato in stile brutalista con toni della Terra. È dotato di un supporto per la modalità oscura per la visualizzazione del dashboard.

Aperto