Componente Lightbox immagine
Un componente Image Lightbox reattivo progettato per l'e-commerce con uno stile di design piatto minimalista, che supporta temi chiari e scuri utilizzando Tailwind CSS.
Codice HTML
<div class="relative inline-block cursor-pointer group">
<img src="https://picsum.photos/600/400" alt="Lightbox" class="w-full h-auto rounded-lg shadow-sm transition duration-300 ease-in-out transform group-hover:scale-105">
<div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100 rounded-lg"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100">
<span class="text-white text-2xl font-semibold">View Image</span>
</div>
</div>
<!-- Lightbox Modal -->
<div id="lightbox-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-80 hidden">
<div class="relative w-full max-w-3xl">
<img src="https://picsum.photos/1200/800" alt="Lightbox Image" class="w-full h-auto rounded-lg shadow-lg">
<button class="absolute top-4 right-4 text-white bg-red-500 hover:bg-red-600 rounded-full p-2 transition duration-300 ease-in-out">✖</button>
</div>
</div>
<style>
/* Dark Mode Support */
.dark .bg-gray-900 { background-color: #1b1b1b; }
.dark .bg-black { background-color: #000; }
</style>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 reattivo progettato in modalità scura utilizzando Tailwind CSS. Presenta uno sfondo scuro, effetti di opacità e design reattivi per adattarsi a varie dimensioni dello schermo.
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.