Componente de caja de luz de imagen
Un componente de caja de luz de imagen responsivo diseñado con el estilo Glassmorphism utilizando Tailwind CSS. El componente admite un tema oscuro con elementos translúcidos similares al vidrio esmerilado y efectos de desenfoque.
Código HTML
<div class="relative">
<button class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 inline-flex items-center p-2" id="open-lightbox">
<img src="https://picsum.photos/40/40?random" alt="Thumbnail" class="rounded-full">
</button>
<div class="hidden fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="lightbox">
<div class="flex items-center justify-center h-full">
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg rounded-lg p-4">
<img src="https://picsum.photos/800/600?random" alt="Lightbox Image" class="rounded-md">
<button class="mt-4 bg-red-500 dark:bg-red-700 text-white rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" id="close-lightbox">Close</button>
</div>
</div>
</div>
</div>
<style>
/* Lightbox toggle visibility */
#lightbox:target {
display: flex;
}
</style>Componentes relacionados
Componente de caja de luz de imagen
Un componente de caja de luz de imagen receptivo con un diseño artístico / acuarela, colores apagados y soporte de modo oscuro, adecuado para plataformas educativas.
Componente de caja de luz de imagen
Un componente de caja de luz de imagen responsiva diseñado en un estilo brutalista con tonos tierra. Cuenta con un soporte de modo oscuro para la visualización del tablero.
Componente de caja de luz de imagen
Un componente de caja de luz de imagen retro/vintage con colores vibrantes, diseño responsivo y compatibilidad con temas oscuros, adecuado para portafolios.