Composants Boîte lumineuse d’image Composant Lightbox d’image

Composant Lightbox d’image

Un composant complexe de boîte lumineuse d’image conçu dans un style brutaliste, adapté aux interfaces de médias sociaux, doté d’une palette de couleurs en niveaux de gris et d’un contraste élevé pour la prise en charge du mode sombre.

Aperçu

HTML Code

<div class="relative z-10">
    <!-- Thumbnail Trigger -->
    <div class="mb-4">
        <img src="https://picsum.photos/200/300" alt="Thumbnail" class="cursor-pointer h-auto w-full border border-gray-700 hover:border-gray-500 dark:border-gray-300 dark:hover:border-gray-100">
    </div>

    <!-- Modal for Lightbox -->
    <div class="fixed inset-0 bg-gray-900 bg-opacity-75 dark:bg-opacity-95 flex items-center justify-center hidden group-hover:block">
        <div class="bg-gray-800 w-full max-w-3xl p-6 rounded-lg shadow-lg border border-gray-700">
            <!-- Image Display -->
            <img src="https://picsum.photos/800/600" alt="Large Image" class="w-full h-auto mb-4 rounded-lg border border-gray-600 dark:border-gray-400">
            <!-- Close Button -->
            <button class="absolute top-4 right-4 text-white hover:text-gray-400">
                &times;
            </button>
            <div class="flex justify-end mt-4">
                <a href="#" class="text-gray-300 hover:text-gray-100 transition-colors duration-200">Next</a>
                <a href="#" class="ml-4 text-gray-300 hover:text-gray-100 transition-colors duration-200">Previous</a>
            </div>
        </div>
    </div>
</div>

<style>
    /* Brutalist Styles */
    img {
        user-select: none;
    }
    button {
        background: none;
        border: none;
        font-size: 2rem;
        cursor: pointer;
    }
    button:hover {
        color: #ddd;
    }
    .hidden {
        display: none;
    }
</style>

Composants associés

Composant Lightbox d’image

Un composant de lightbox d’image réactif avec un design plat minimaliste, une palette de couleurs monochromatique et une complexité modérée, adapté aux interfaces de médias sociaux. Il prend en charge un thème sombre à l’aide du préfixe dark : de Tailwind CSS et ne nécessite pas de JavaScript. Les images proviennent de picsum.photos.

Ouvrir

Composant Lightbox d’image

Un composant complexe d’Image Lightbox conçu avec des éléments skeuomorphes et une palette de couleurs pastel, adapté aux environnements de tableau de bord. Il comprend une mise en page réactive, la prise en charge du thème sombre et une interface interactive.

Ouvrir

Composant Lightbox d’image

Un composant de lightbox d’image réactif avec un design rétro/vintage et une palette de couleurs de terre, adapté aux tableaux de bord.

Ouvrir