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 Image Lightbox réactif conçu pour le commerce électronique, avec prise en charge du mode sombre et une palette de couleurs de tons de terre.
Composant Lightbox d’image
Un composant de lightbox d’image réactive conçu en mode sombre à l’aide de Tailwind CSS. Il présente un arrière-plan sombre, des effets d’opacité et des conceptions réactives pour s’adapter à différentes tailles d’écran.
Composant Lightbox d’image
Un composant Image Lightbox de style brutaliste adapté à un blog ou à une plate-forme de contenu, conçu avec des tons de terre et des éléments interactifs complexes.