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

Composant Lightbox d’image

Un composant de lightbox d’image réactive conçu en mode sombre à l’aide de Tailwind CSS. Il présente un arrière-plan sombre, des effets d’opacité et des conceptions réactives pour s’adapter à différentes tailles d’écran.

Aperçu

HTML Code

<div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-75 hidden" id="lightbox">
    <div class="relative">
        <img src="https://picsum.photos/800/600" alt="Lightbox Image" class="rounded-lg shadow-lg">
        <button class="absolute top-2 right-2 text-white bg-gray-800 hover:bg-gray-700 rounded-full p-2 focus:outline-none" onclick="document.getElementById('lightbox').classList.add('hidden')">
            &times;
        </button>
    </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4">
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/200" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/201" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/202" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/203" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/204" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/205" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
</div>

Composants associés

Composant Lightbox d’image

Un composant simple de lightbox d’image réactive conçu pour les sites Web de commerce électronique, avec un style de mode sombre et une palette de couleurs analogue.

Ouvrir

Composant Lightbox d’image

Un composant Image Lightbox de style brutaliste adapté à un blog ou à une plate-forme de contenu, conçu avec des tons de terre et des éléments interactifs complexes.

Ouvrir

Composant Lightbox d’image

Un composant lightbox d’image réactif avec prise en charge du mode sombre. Ce composant affiche une galerie d’images, et en cliquant sur une image, une fenêtre modale plein écran avec des flèches de navigation pour parcourir les images. Il dispose d’un bouton de fermeture et utilise des couleurs vives pour mettre en évidence les éléments interactifs. Le design est adapté à un contexte d’entreprise, garantissant une expérience utilisateur à la fois professionnelle et attrayante.

Ouvrir