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.
Codice HTML
<div class="relative">
<button class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 inline-flex items-center p-2" id="open-lightbox">
<img src="https://picsum.photos/40/40?random" alt="Thumbnail" class="rounded-full">
</button>
<div class="hidden fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="lightbox">
<div class="flex items-center justify-center h-full">
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg rounded-lg p-4">
<img src="https://picsum.photos/800/600?random" alt="Lightbox Image" class="rounded-md">
<button class="mt-4 bg-red-500 dark:bg-red-700 text-white rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" id="close-lightbox">Close</button>
</div>
</div>
</div>
</div>
<style>
/* Lightbox toggle visibility */
#lightbox:target {
display: flex;
}
</style>Componenti correlati
Componente Lightbox immagine
Un componente Image Lightbox in stile brutalista adatto per un blog o una piattaforma di contenuti, progettato con toni della terra ed elementi interattivi complessi.
Componente Lightbox immagine
Un componente lightbox per immagini retrò/vintage con colori vivaci, design reattivo e supporto per temi scuri, adatto per i portfolio.
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.