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

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.

Aperçu

HTML Code

<div class="fixed inset-0 flex items-center justify-center bg-gray-900 dark:bg-gray-800 z-50">
    <div class="relative w-full max-w-2xl">
        <button class="absolute top-0 right-0 p-2 text-white hover:bg-gray-700 dark:hover:bg-gray-600 rounded-full focus:outline-none" aria-label="Close">
            &times;
        </button>
        <img src="https://picsum.photos/800/600" alt="Product Image" class="w-full h-auto rounded-lg shadow-lg">
        <div class="flex justify-between mt-4">
            <button class="flex items-center justify-center w-10 h-10 bg-gray-700 dark:bg-gray-600 rounded-full text-white hover:bg-gray-600 dark:hover:bg-gray-500">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-full h-full rounded-full">
            </button>
            <button class="flex items-center justify-center w-10 h-10 bg-gray-700 dark:bg-gray-600 rounded-full text-white hover:bg-gray-600 dark:hover:bg-gray-500">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-full h-full rounded-full">
            </button>
        </div>
    </div>
</div>

Composants associés

Composant Lightbox d’image

Un composant de lightbox d’image réactif avec des couleurs neutres froides, des transitions de dégradé et une prise en charge du mode sombre, adapté aux services de conseil professionnels.

Ouvrir

Composant Lightbox d’image

Un composant de lightbox d’image réactif avec un thème rétro/vintage utilisant Tailwind CSS, prenant en charge le mode sombre et présentant des images de remplacement.

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