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.
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')">×</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 complesso componente Image Lightbox progettato in stile brutalista, adatto per le interfacce dei social media, caratterizzato da una combinazione di colori in scala di grigi e contrasto elevato per il supporto della modalità oscura.
Componente Lightbox immagine
Un componente lightbox per immagini reattive progettato per le dashboard, caratterizzato da uno stile 3D e una combinazione di colori monocromatica. Include effetti al passaggio del mouse e funzionalità modali utilizzando Tailwind CSS per il supporto della modalità oscura.
Componente Lightbox immagine
Un componente lightbox per immagini reattive con supporto per la modalità scura. Questo componente visualizza una galleria di immagini e facendo clic su un'immagine si apre una finestra modale a schermo intero con frecce di navigazione per sfogliare le immagini. È dotato di un pulsante di chiusura e utilizza colori vivaci per evidenziare gli elementi interattivi. Il design è studiato su misura per un contesto aziendale/aziendale, garantendo un'esperienza utente professionale ma coinvolgente.