Composant Galerie
Un composant de galerie réactif avec des micro-interactions pour les médias sociaux, conçu avec un thème sombre et une mise en page simple à l’aide de Tailwind CSS.
HTML Code
<div class="container mx-auto p-4">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=1" alt="Gallery image 1" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-blue-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="font-bold">John Doe</span>
</div>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/201?random=2" alt="Gallery image 2" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-green-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="font-bold">Jane Smith</span>
</div>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/202?random=3" alt="Gallery image 3" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-purple-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="font-bold">Michael Johnson</span>
</div>
</div>
</div>
<!-- Repeat as necessary for more images -->
</div>
</div>
Composants associés
Composant Galerie
Un composant de galerie réactif avec un style de conception 3D, avec de la profondeur et de l’engagement grâce à des effets d’ombre et de survol. Il prend en charge les thèmes sombres et clairs.
Composant Galerie
Un composant de galerie réactif avec un effet de glassmorphism, des couleurs vives et une prise en charge du thème sombre, adapté à un tableau de bord.
Volet Galerie immobilière
Un composant de galerie réactif et professionnel pour les annonces immobilières, avec une mise en page épurée, une palette de couleurs pastel et une prise en charge complète du mode sombre. Comprend des cartes de propriétés avec des détails, une section de filtrage/tri et un appel à l’action clair.