Componente de caja de luz de imagen
Un componente de caja de luz de imagen receptivo diseñado para el comercio electrónico, con soporte para modo oscuro y una combinación de colores en tonos tierra.
Código HTML
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75 hidden dark:block" id="lightbox">
<div class="relative bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<button class="absolute top-3 right-3 text-white focus:outline-none" onclick="document.getElementById('lightbox').classList.add('hidden')">×</button>
<img class="w-full h-auto" src="https://picsum.photos/800/600" alt="Product Image">
<div class="p-4">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="text-white">
<p class="text-sm font-semibold">John Doe</p>
<p class="text-xs text-gray-400">E-commerce Store</p>
</div>
</div>
<p class="mt-2 text-xs text-gray-300">Image description or product details can go here.</p>
</div>
</div>
</div>
<div class="flex justify-center py-6">
<button class="bg-green-600 text-white py-2 px-4 rounded-lg focus:outline-none hover:bg-green-500" onclick="document.getElementById('lightbox').classList.remove('hidden')">
Open Lightbox
</button>
</div>Componentes relacionados
Componente de caja de luz de imagen
Un componente de caja de luz de imagen sensible con soporte para modo oscuro. Este componente muestra una galería de imágenes y, al hacer clic en una imagen, se abre un modal de pantalla completa con flechas de navegación para navegar por las imágenes. Cuenta con un botón de cierre y utiliza colores vibrantes para resaltar elementos interactivos. El diseño se adapta a un contexto empresarial/corporativo, lo que garantiza una experiencia de usuario profesional pero atractiva.
Componente de caja de luz de imagen
Un componente de caja de luz de imagen responsivo diseñado en modo oscuro usando Tailwind CSS. Cuenta con un fondo oscuro, efectos de opacidad y diseños receptivos para adaptarse a varios tamaños de pantalla.
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.