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.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative group">
<img src="https://picsum.photos/300/200" alt="Thumbnail" class="w-48 h-32 rounded-lg shadow-neu transition-transform duration-300 group-hover:scale-105" />
<div class="hidden absolute top-0 left-0 right-0 bottom-0 bg-white bg-opacity-75 dark:bg-gray-800 rounded-lg shadow-neu group-hover:block">
<div class="flex items-center justify-center h-full">
<img src="https://picsum.photos/600/400" alt="Lightbox image" class="max-w-full h-auto rounded-lg" />
</div>
</div>
</div>
</div>
<style>
.shadow-neu {
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2),
-8px -8px 20px rgba(255, 255, 255, 0.9);
}
</style>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.
Composant Lightbox d’image
Un composant de lightbox d’image réactive conçu dans un style brutaliste avec des tons de terre. Il dispose d’une prise en charge du mode sombre pour la visualisation du tableau de bord.