Componente de caja de luz de imagen
Un componente complejo de Image Lightbox diseñado con elementos skeuomórficos y una combinación de colores pastel, adecuado para entornos de tablero. Incluye un diseño responsivo, soporte para temas oscuros y una interfaz interactiva.
Código HTML
<div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-75 dark:bg-black">
<div class="bg-gradient-to-br from-pink-300 to-blue-300 rounded-xl shadow-xl p-5 w-full max-w-3xl relative">
<button class="absolute top-2 right-2 text-gray-700 dark:text-gray-300 font-bold text-lg hover:text-gray-900 dark:hover:text-white transition">
×
</button>
<div class="flex justify-center mb-5">
<img src="https://picsum.photos/600/400" alt="Lightbox Image" class="rounded-lg shadow-lg max-w-full h-auto brightness-90 dark:brightness-75">
</div>
<div class="grid grid-cols-3 gap-4">
<img src="https://picsum.photos/200/150?random=1" alt="Thumbnail 1" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
<img src="https://picsum.photos/200/150?random=2" alt="Thumbnail 2" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
<img src="https://picsum.photos/200/150?random=3" alt="Thumbnail 3" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
<img src="https://picsum.photos/200/150?random=4" alt="Thumbnail 4" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
<img src="https://picsum.photos/200/150?random=5" alt="Thumbnail 5" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
<img src="https://picsum.photos/200/150?random=6" alt="Thumbnail 6" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
</div>
<div class="flex justify-between items-center mt-5">
<button class="bg-white text-gray-800 rounded-md px-4 py-2 shadow hover:bg-gray-100 transition">Previous</button>
<button class="bg-white text-gray-800 rounded-md px-4 py-2 shadow hover:bg-gray-100 transition">Next</button>
</div>
</div>
</div>Componentes relacionados
Componente de caja de luz de imagen
Un componente de caja de luz de imagen responsiva simple diseñado para sitios web de comercio electrónico, con un estilo de modo oscuro y un esquema de color análogo.
Componente de caja de luz de imagen
Un componente de caja de luz de imagen receptivo diseñado en el estilo Material Design, con un esquema de color triádico y soporte para el modo oscuro. Es adecuado para mostrar trabajos o productos en portafolios.