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.
HTML Code
<div class="max-w-7xl mx-auto p-6">
<h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=1" alt="Gallery Item 1" class="w-full h-auto rounded-lg" />
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white font-semibold text-lg">Gallery Item 1</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=2" alt="Gallery Item 2" class="w-full h-auto rounded-lg" />
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white font-semibold text-lg">Gallery Item 2</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=3" alt="Gallery Item 3" class="w-full h-auto rounded-lg" />
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white font-semibold text-lg">Gallery Item 3</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=4" alt="Gallery Item 4" class="w-full h-auto rounded-lg" />
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white font-semibold text-lg">Gallery Item 4</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=5" alt="Gallery Item 5" class="w-full h-auto rounded-lg" />
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white font-semibold text-lg">Gallery Item 5</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=6" alt="Gallery Item 6" class="w-full h-auto rounded-lg" />
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white font-semibold text-lg">Gallery Item 6</span>
</div>
</div>
</div>
</div>
<style>
.dark { background-color: #1a202c; }
.dark .text-gray-900 { color: white; }
</style>Composants associés
Composant Galerie
Un composant de galerie réactif utilisant Tailwind CSS avec un design Skeuomorphism, une palette de couleurs pastel et une complexité modérée à des fins de médias sociaux. Inclut la prise en charge du mode sombre et utilise picsum.photos pour les images et randomuser.me pour les avatars.
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.
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.