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
Componente de caja de luz de imagen con diseño retro / vintage, combinación de colores análoga, complejidad simple, para fines comerciales / corporativos. Responsivo con soporte para temas oscuros. HTML solo con Tailwind CSS.
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.
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.