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
Caja de luz de morfismo de vidrio con tonos sepia para bienes raíces
Un componente de caja de luz de imagen receptivo con un diseño de morfismo de vidrio, con elementos translúcidos similares al vidrio esmerilado y tonos de color sepia/marrón, adecuado para galerías de imágenes de propiedades inmobiliarias. Incluye soporte para modo oscuro.
Componente de caja de luz de imagen para plataformas de trabajo/carrera
Un componente de caja de luz de imagen limpio y minimalista con una influencia de diseño suizo y una combinación de colores azules, adecuado para bolsas de trabajo o plataformas profesionales. Es compatible con la capacidad de respuesta y el modo oscuro, lo que permite a los usuarios ver imágenes en una ventana emergente superpuesta.
Componente de caja de luz de imagen
Un componente de caja de luz de imagen receptivo diseñado para tableros, con un estilo 3D y un esquema de color monocromático. Incluye efectos de desplazamiento y funcionalidad modal que utiliza Tailwind CSS para la compatibilidad con el modo oscuro.