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.
HTML Code
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg relative">
<h2 class="text-white text-2xl font-semibold text-center mb-4">Image Lightbox</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div class="group relative rounded-lg overflow-hidden">
<img src="https://picsum.photos/id/1018/400/300" alt="Sample Image" class="w-full h-auto rounded-lg group-hover:scale-105 transition-transform duration-300 ease-in-out" />
<div class="absolute inset-0 bg-black bg-opacity-30 flex justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
<button class="text-white bg-blue-500 hover:bg-blue-600 font-semibold py-2 px-4 rounded">View</button>
</div>
</div>
<div class="group relative rounded-lg overflow-hidden">
<img src="https://picsum.photos/id/1025/400/300" alt="Sample Image" class="w-full h-auto rounded-lg group-hover:scale-105 transition-transform duration-300 ease-in-out" />
<div class="absolute inset-0 bg-black bg-opacity-30 flex justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
<button class="text-white bg-blue-500 hover:bg-blue-600 font-semibold py-2 px-4 rounded">View</button>
</div>
</div>
<div class="group relative rounded-lg overflow-hidden">
<img src="https://picsum.photos/id/1032/400/300" alt="Sample Image" class="w-full h-auto rounded-lg group-hover:scale-105 transition-transform duration-300 ease-in-out" />
<div class="absolute inset-0 bg-black bg-opacity-30 flex justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
<button class="text-white bg-blue-500 hover:bg-blue-600 font-semibold py-2 px-4 rounded">View</button>
</div>
</div>
</div>
<div class="mt-6">
<h3 class="text-white text-xl font-semibold mb-2">User Avatars</h3>
<div class="flex space-x-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-400" />
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-400" />
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-400" />
</div>
</div>
</div>Composants associés
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.
Cyberpunk_Real_Estate_Lightbox
Un composant de lightbox d’image simple et réactif avec une palette de couleurs sourdes inspirée du cyberpunk, adapté aux annonces immobilières. Prend en charge le mode sombre et utilise le HTML sémantique.
Composant Lightbox d’image rétro
Un composant Lightbox d’image réactif et simple avec un design rétro/vintage, une palette de couleurs analogue et une prise en charge du mode sombre, adapté aux blogs et aux sites de contenu.