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.
HTML Code
<div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-75 dark:bg-black">
<div class="bg-gradient-to-br from-pink-300 to-blue-300 rounded-xl shadow-xl p-5 w-full max-w-3xl relative">
<button class="absolute top-2 right-2 text-gray-700 dark:text-gray-300 font-bold text-lg hover:text-gray-900 dark:hover:text-white transition">
×
</button>
<div class="flex justify-center mb-5">
<img src="https://picsum.photos/600/400" alt="Lightbox Image" class="rounded-lg shadow-lg max-w-full h-auto brightness-90 dark:brightness-75">
</div>
<div class="grid grid-cols-3 gap-4">
<img src="https://picsum.photos/200/150?random=1" alt="Thumbnail 1" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
<img src="https://picsum.photos/200/150?random=2" alt="Thumbnail 2" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
<img src="https://picsum.photos/200/150?random=3" alt="Thumbnail 3" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
<img src="https://picsum.photos/200/150?random=4" alt="Thumbnail 4" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
<img src="https://picsum.photos/200/150?random=5" alt="Thumbnail 5" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
<img src="https://picsum.photos/200/150?random=6" alt="Thumbnail 6" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
</div>
<div class="flex justify-between items-center mt-5">
<button class="bg-white text-gray-800 rounded-md px-4 py-2 shadow hover:bg-gray-100 transition">Previous</button>
<button class="bg-white text-gray-800 rounded-md px-4 py-2 shadow hover:bg-gray-100 transition">Next</button>
</div>
</div>
</div>Composants associés
Composant de boîte lumineuse d’image - Violet skeuomorphe
Un composant de lightbox d’image simple et réactif avec un design skeuomorphe dans le spectre violet/violet, adapté aux plateformes d’emploi/de carrière. Inclut la prise en charge du mode sombre.
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.
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.