Componente Lightbox immagine
Un complesso componente Image Lightbox progettato con elementi scheumorfici e una combinazione di colori pastello, adatto per gli ambienti dashboard. Include un layout reattivo, supporto per temi scuri e un'interfaccia interattiva.
Codice HTML
<div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-75 dark:bg-black">
<div class="bg-gradient-to-br from-pink-300 to-blue-300 rounded-xl shadow-xl p-5 w-full max-w-3xl relative">
<button class="absolute top-2 right-2 text-gray-700 dark:text-gray-300 font-bold text-lg hover:text-gray-900 dark:hover:text-white transition">
×
</button>
<div class="flex justify-center mb-5">
<img src="https://picsum.photos/600/400" alt="Lightbox Image" class="rounded-lg shadow-lg max-w-full h-auto brightness-90 dark:brightness-75">
</div>
<div class="grid grid-cols-3 gap-4">
<img src="https://picsum.photos/200/150?random=1" alt="Thumbnail 1" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
<img src="https://picsum.photos/200/150?random=2" alt="Thumbnail 2" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
<img src="https://picsum.photos/200/150?random=3" alt="Thumbnail 3" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
<img src="https://picsum.photos/200/150?random=4" alt="Thumbnail 4" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
<img src="https://picsum.photos/200/150?random=5" alt="Thumbnail 5" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
<img src="https://picsum.photos/200/150?random=6" alt="Thumbnail 6" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
</div>
<div class="flex justify-between items-center mt-5">
<button class="bg-white text-gray-800 rounded-md px-4 py-2 shadow hover:bg-gray-100 transition">Previous</button>
<button class="bg-white text-gray-800 rounded-md px-4 py-2 shadow hover:bg-gray-100 transition">Next</button>
</div>
</div>
</div>Componenti correlati
Componente Lightbox immagine
Un componente lightbox per immagini reattivo progettato con lo stile Glassmorphism utilizzando Tailwind CSS. Il componente supporta un tema scuro con elementi traslucidi simili al vetro smerigliato ed effetti di sfocatura.
Gioco 3D Purple Lightbox
Un componente lightbox per immagini semplice e reattivo con elementi di design 3D e una combinazione di colori viola/viola, adatto per siti Web di giochi.
Lightbox Glassmorphism con toni seppia per il settore immobiliare
Un componente lightbox per immagini reattivo con un design glassmorphism, caratterizzato da elementi traslucidi simili al vetro smerigliato e tonalità di colore seppia/marrone, adatto per gallerie di immagini di proprietà immobiliari. Include il supporto per la modalità oscura.