Componente de caja de luz de imagen
Un componente de caja de luz de imagen receptivo con estilo de diseño Neumorphism y soporte de tema oscuro usando Tailwind CSS.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative group">
<img src="https://picsum.photos/300/200" alt="Thumbnail" class="w-48 h-32 rounded-lg shadow-neu transition-transform duration-300 group-hover:scale-105" />
<div class="hidden absolute top-0 left-0 right-0 bottom-0 bg-white bg-opacity-75 dark:bg-gray-800 rounded-lg shadow-neu group-hover:block">
<div class="flex items-center justify-center h-full">
<img src="https://picsum.photos/600/400" alt="Lightbox image" class="max-w-full h-auto rounded-lg" />
</div>
</div>
</div>
</div>
<style>
.shadow-neu {
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2),
-8px -8px 20px rgba(255, 255, 255, 0.9);
}
</style>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 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.
Componente de caja de luz de imagen retro
Un componente de caja de luz de imagen simple y receptivo con diseño retro / vintage, combinación de colores análoga y soporte de modo oscuro, adecuado para blogs y sitios de contenido.