Composant Lightbox d’image
Un composant Image Lightbox réactif conçu dans le style Material Design, avec une palette de couleurs triadique et la prise en charge du mode sombre. Il convient pour présenter des portfolios ou des produits.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
<h2 class="mb-4 text-2xl font-semibold text-gray-800 dark:text-gray-200">Portfolio Showcase</h2>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<div class="relative group">
<img src="https://picsum.photos/300/200?random=1" alt="Portfolio Image 1" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
<button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
</div>
</div>
<div class="relative group">
<img src="https://picsum.photos/300/200?random=2" alt="Portfolio Image 2" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
<button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
</div>
</div>
<div class="relative group">
<img src="https://picsum.photos/300/200?random=3" alt="Portfolio Image 3" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
<button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
</div>
</div>
<div class="relative group">
<img src="https://picsum.photos/300/200?random=4" alt="Portfolio Image 4" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
<button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
</div>
</div>
<div class="relative group">
<img src="https://picsum.photos/300/200?random=5" alt="Portfolio Image 5" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
<button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
</div>
</div>
<div class="relative group">
<img src="https://picsum.photos/300/200?random=6" alt="Portfolio Image 6" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
<button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
</div>
</div>
</div>
</div>Composants associés
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.
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.
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.