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
Composant Galerie
Un composant de galerie réactif avec un design plat minimaliste, avec des images et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Galerie
Un composant de galerie réactif avec un design Glassmorphism, une palette de couleurs analogue, une mise en page complexe et la prise en charge du thème sombre pour le commerce électronique.
Composant Galerie
Un composant de galerie de style rétro vintage avec des effets réactifs et la prise en charge du thème sombre.