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.
HTML Code
<div class="relative w-full p-4 max-w-4xl mx-auto">
<!-- Thumbnail images -->
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<img src="https://picsum.photos/300/200?random=1" alt="Image 1" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=1')" />
<img src="https://picsum.photos/300/200?random=2" alt="Image 2" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=2')" />
<img src="https://picsum.photos/300/200?random=3" alt="Image 3" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=3')" />
<img src="https://picsum.photos/300/200?random=4" alt="Image 4" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=4')" />
</div>
<!-- Modal overlay -->
<div id="imageModal" class="fixed inset-0 z-50 hidden bg-black bg-opacity-75 justify-center items-center dark:bg-opacity-90" onclick="closeModal()">
<div class="relative w-11/12 md:w-3/4 lg:w-2/3">
<span class="absolute top-2 right-2 text-white cursor-pointer" onclick="closeModal()">×</span>
<img id="modalImage" class="rounded-lg shadow-lg" src="" alt="Modal Image" />
</div>
</div>
</div>
<!-- Tailwind CSS styles for dark mode and retro theme -->
<style>
body {
background-color: #f4f4e6;
color: #333;
}
.dark body {
background-color: #1a202c;
color: #e2e8f0;
}
</style>Composants associés
Composant Lightbox d’image
Un composant de lightbox d’image réactif conçu pour les tableaux de bord, avec un style 3D et une palette de couleurs monochromatiques. Il comprend des effets de survol et une fonctionnalité modale utilisant Tailwind CSS pour la prise en charge du mode sombre.
Composant Lightbox d’image
Un composant de lightbox d’image réactive conçu avec le style Glassmorphism à l’aide de Tailwind CSS. Le composant prend en charge un thème sombre avec des éléments translucides givrés ressemblant à du verre et des effets de flou.
Composant Lightbox d’image
Un composant lightbox d’image réactif avec le style de conception Neumorphism et la prise en charge du thème sombre à l’aide de Tailwind CSS.