Composant Galerie
Composant de galerie réactive avec prise en charge du mode sombre
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 py-8">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<!-- Gallery Item 1 -->
<div class="relative overflow-hidden rounded-lg shadow-lg group">
<img src="https://picsum.photos/600/400?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p class="text-white text-xl font-semibold">Project Title 1</p>
</div>
</div>
<!-- Gallery Item 2 -->
<div class="relative overflow-hidden rounded-lg shadow-lg group">
<img src="https://picsum.photos/600/400?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p class="text-white text-xl font-semibold">Project Title 2</p>
</div>
</div>
<!-- Gallery Item 3 -->
<div class="relative overflow-hidden rounded-lg shadow-lg group">
<img src="https://picsum.photos/600/400?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p class="text-white text-xl font-semibold">Project Title 3</p>
</div>
</div>
<!-- Gallery Item 4 -->
<div class="relative overflow-hidden rounded-lg shadow-lg group">
<img src="https://picsum.photos/600/400?random=4" alt="Gallery Image 4" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p class="text-white text-xl font-semibold">Project Title 4</p>
</div>
</div>
<!-- Gallery Item 5 -->
<div class="relative overflow-hidden rounded-lg shadow-lg group">
<img src="https://picsum.photos/600/400?random=5" alt="Gallery Image 5" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p class="text-white text-xl font-semibold">Project Title 5</p>
</div>
</div>
<!-- Gallery Item 6 -->
<div class="relative overflow-hidden rounded-lg shadow-lg group">
<img src="https://picsum.photos/600/400?random=6" alt="Gallery Image 6" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p class="text-white text-xl font-semibold">Project Title 6</p>
</div>
</div>
</div>
</div>
</div>
Composants associés
Galerie d’images sépia minimaliste pour les réservations
Un composant de galerie d’images au design minimaliste et plat avec des tons chauds sépia/brun, adapté aux systèmes de réservation et de réservation. Il dispose d’un design réactif et d’une prise en charge du mode sombre.
Composant Neumorphism Gallery
Un composant de galerie Neumorphic réactif avec prise en charge du mode sombre. Les images sont des espaces réservés de picsum.photos et des avatars de randomuser.me.
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.