Componente de caja de luz de imagen
Un componente de caja de luz de imagen esqueuomórfica diseñado para imitar a sus homólogos del mundo real, con efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative group w-full max-w-2xl bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<img src="https://picsum.photos/600/400" alt="Lightbox Image" class="w-full h-auto rounded-lg transition ease-in-out duration-300 transform group-hover:scale-105" />
<div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-50 transition-opacity duration-300 rounded-lg"></div>
<div class="absolute bottom-0 left-0 right-0 p-4 text-white">
<h2 class="font-bold text-lg">Image Title</h2>
<p class="text-sm">Image description goes here.</p>
</div>
</div>
<div class="mt-4">
<button class="p-2 px-4 bg-blue-600 text-white rounded hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 shadow-lg">
<span class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2" />
View User's Images
</span>
</button>
</div>
</div>Componentes relacionados
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 receptivo con estilo de diseño Neumorphism y soporte de tema oscuro usando Tailwind CSS.
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.