Componente Lightbox immagine
Un componente lightbox per immagini reattive con stile di design Neumorphism e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative group">
<img src="https://picsum.photos/300/200" alt="Thumbnail" class="w-48 h-32 rounded-lg shadow-neu transition-transform duration-300 group-hover:scale-105" />
<div class="hidden absolute top-0 left-0 right-0 bottom-0 bg-white bg-opacity-75 dark:bg-gray-800 rounded-lg shadow-neu group-hover:block">
<div class="flex items-center justify-center h-full">
<img src="https://picsum.photos/600/400" alt="Lightbox image" class="max-w-full h-auto rounded-lg" />
</div>
</div>
</div>
</div>
<style>
.shadow-neu {
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2),
-8px -8px 20px rgba(255, 255, 255, 0.9);
}
</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 Image Lightbox reattivo progettato con elementi 3D, colori vivaci e complessità moderata per siti Web aziendali/aziendali. Supporta lo stile della modalità oscura utilizzando Tailwind CSS.
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.