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.
Código HTML
<div class="relative">
<!-- Lightbox trigger -->
<div class="group cursor-pointer">
<img src="https://picsum.photos/300/200" alt="Thumbnail" class="w-full h-auto rounded-lg border-2 border-gray-700 dark:border-gray-300 transition-all duration-300 ease-in-out hover:scale-105">
</div>
<!-- Lightbox overlay -->
<div class="hidden group-hover:block fixed inset-0 bg-gray-900 bg-opacity-75 flex items-center justify-center transition-opacity duration-300">
<div class="relative p-4">
<img src="https://picsum.photos/800/600" alt="Lightbox Image" class="max-w-full max-h-[90vh] rounded-lg border-4 border-yellow-500 dark:border-cyan-400 shadow-2xl">
<button class="absolute top-2 right-2 bg-red-500 text-white p-2 rounded-full hover:bg-red-700 transition-colors duration-300">Close</button>
</div>
</div>
</div>
<!-- Avatar Section -->
<div class="mt-4 flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-700 dark:border-gray-300">
<div class="text-lg text-gray-800 dark:text-gray-200">
<h3 class="font-bold">User Name</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">User Role</p>
</div>
</div>Componentes relacionados
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.
Caja de luz púrpura para juegos 3D
Un componente de caja de luz de imagen simple y receptivo con elementos de diseño 3D y un esquema de color púrpura/violeta, adecuado para sitios web de juegos.
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.