Componentes Caja de luz de imagen Componente de caja de luz de imagen

Componente de caja de luz de imagen

Un componente de caja de luz de imagen responsivo con un tema retro/vintage que usa Tailwind CSS, admite el modo oscuro y presenta imágenes de marcador de posición.

Vista previa

Código HTML

<div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto mt-10">
    <img id="lightbox-trigger" src="https://picsum.photos/600/400?random=1" class="w-full h-48 object-cover rounded-t-lg" alt="Vintage Image">
    <div class="p-4">
        <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Vintage Aesthetic</h2>
        <p class="text-gray-600 dark:text-gray-400">A nostalgic look into the past with a touch of modern design.</p>
    </div>
    <div class="flex justify-center pb-4">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">View More Images</button>
    </div>
    <div id="lightbox" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
        <span class="absolute top-4 right-4 text-white cursor-pointer" onclick="document.getElementById('lightbox').classList.add('hidden')">&times;</span>
        <img src="https://picsum.photos/1200/800?random=1" class="max-w-full max-h-full rounded shadow-lg" alt="Lightbox Image">
    </div>
</div>

<style>
    /* Dark mode styling */
    @media (prefers-color-scheme: dark) {
        .bg-white {
            background-color: #1f2937;
        }
        .text-gray-800 {
            color: #e5e7eb;
        }
        .text-gray-600 {
            color: #d1d5db;
        }
    }
</style>

Componentes relacionados

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.

Abrir

Componente de caja de luz de imagen

Un componente de caja de luz de imagen receptivo diseñado con elementos 3D, colores vibrantes y complejidad moderada para sitios web comerciales / corporativos. Es compatible con el estilo del modo oscuro mediante Tailwind CSS.

Abrir

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.

Abrir