Componente Lightbox immagine
Un semplice componente lightbox per immagini reattive progettato per siti Web di e-commerce, caratterizzato da uno stile in modalità scura e una combinazione di colori analoga.
Codice HTML
<div class="fixed inset-0 flex items-center justify-center bg-gray-900 dark:bg-gray-800 z-50">
<div class="relative w-full max-w-2xl">
<button class="absolute top-0 right-0 p-2 text-white hover:bg-gray-700 dark:hover:bg-gray-600 rounded-full focus:outline-none" aria-label="Close">
×
</button>
<img src="https://picsum.photos/800/600" alt="Product Image" class="w-full h-auto rounded-lg shadow-lg">
<div class="flex justify-between mt-4">
<button class="flex items-center justify-center w-10 h-10 bg-gray-700 dark:bg-gray-600 rounded-full text-white hover:bg-gray-600 dark:hover:bg-gray-500">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-full h-full rounded-full">
</button>
<button class="flex items-center justify-center w-10 h-10 bg-gray-700 dark:bg-gray-600 rounded-full text-white hover:bg-gray-600 dark:hover:bg-gray-500">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-full h-full rounded-full">
</button>
</div>
</div>
</div>Componenti correlati
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.
Componente Lightbox immagine
Un componente lightbox per immagini reattive con un tema retrò/vintage che utilizza Tailwind CSS, supporta la modalità oscura e presenta immagini segnaposto.