Componente Lightbox immagine
Un componente lightbox per immagini reattivo progettato in stile brutalista con toni della Terra. È dotato di un supporto per la modalità oscura per la visualizzazione del dashboard.
Codice HTML
<div class="relative">
<!-- Lightbox trigger -->
<div class="group cursor-pointer">
<img src="https://picsum.photos/300/200" alt="Thumbnail" class="w-full h-auto rounded-lg border-2 border-gray-700 dark:border-gray-300 transition-all duration-300 ease-in-out hover:scale-105">
</div>
<!-- Lightbox overlay -->
<div class="hidden group-hover:block fixed inset-0 bg-gray-900 bg-opacity-75 flex items-center justify-center transition-opacity duration-300">
<div class="relative p-4">
<img src="https://picsum.photos/800/600" alt="Lightbox Image" class="max-w-full max-h-[90vh] rounded-lg border-4 border-yellow-500 dark:border-cyan-400 shadow-2xl">
<button class="absolute top-2 right-2 bg-red-500 text-white p-2 rounded-full hover:bg-red-700 transition-colors duration-300">Close</button>
</div>
</div>
</div>
<!-- Avatar Section -->
<div class="mt-4 flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-700 dark:border-gray-300">
<div class="text-lg text-gray-800 dark:text-gray-200">
<h3 class="font-bold">User Name</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">User Role</p>
</div>
</div>Componenti correlati
Componente Lightbox immagine
Un componente lightbox per immagini reattive con stile di design Neumorphism e supporto per temi scuri utilizzando Tailwind CSS.
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.