Composant Lightbox d’image
Un composant d’image Lightbox réactif conçu pour le commerce électronique avec un style de design plat minimaliste, prenant en charge les thèmes clairs et sombres à l’aide de Tailwind CSS.
HTML Code
<div class="relative inline-block cursor-pointer group">
<img src="https://picsum.photos/600/400" alt="Lightbox" class="w-full h-auto rounded-lg shadow-sm transition duration-300 ease-in-out transform group-hover:scale-105">
<div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100 rounded-lg"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100">
<span class="text-white text-2xl font-semibold">View Image</span>
</div>
</div>
<!-- Lightbox Modal -->
<div id="lightbox-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-80 hidden">
<div class="relative w-full max-w-3xl">
<img src="https://picsum.photos/1200/800" alt="Lightbox Image" class="w-full h-auto rounded-lg shadow-lg">
<button class="absolute top-4 right-4 text-white bg-red-500 hover:bg-red-600 rounded-full p-2 transition duration-300 ease-in-out">✖</button>
</div>
</div>
<style>
/* Dark Mode Support */
.dark .bg-gray-900 { background-color: #1b1b1b; }
.dark .bg-black { background-color: #000; }
</style>Composants associés
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 Image Lightbox réactif conçu avec des éléments 3D, des couleurs vives et une complexité modérée pour les sites Web d’entreprise. Il prend en charge le style du mode sombre à l’aide de Tailwind CSS.
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.