Composant de galerie minimaliste
Un composant de galerie d’images réactif et minimaliste avec une palette de couleurs chaudes et crépusculaires, adapté aux applications technologiques/SaaS. Inclut la prise en charge du mode sombre.
HTML Code
<section class="py-8 px-4 bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
<div class="max-w-6xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-extrabold text-orange-600 dark:text-orange-400 text-center mb-6 sm:mb-8 md:mb-10">
Our Featured Designs
</h2>
<p class="text-lg text-gray-700 dark:text-gray-300 text-center mb-8 sm:mb-10 lg:mb-12 max-w-2xl mx-auto leading-relaxed">
Explore our collection of sophisticated and user-friendly interfaces, crafted with precision and passion.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 lg:gap-8">
<!-- Gallery Item 1 -->
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
<div class="relative pb-2/3 overflow-hidden group">
<img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1018/600/400" alt="Gallery Image 1">
<div class="absolute inset-0 bg-yellow-500 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
</div>
<div class="p-5 flex-grow flex flex-col">
<h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">Intuitive Dashboard</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">A clean and powerful analytics dashboard designed for clarity.</p>
</div>
</div>
<!-- Gallery Item 2 -->
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
<div class="relative pb-2/3 overflow-hidden group">
<img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1043/600/400" alt="Gallery Image 2">
<div class="absolute inset-0 bg-red-500 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
</div>
<div class="p-5 flex-grow flex flex-col">
<h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">Seamless Onboarding</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Guiding users through their first experience with ease.</p>
</div>
</div>
<!-- Gallery Item 3 -->
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
<div class="relative pb-2/3 overflow-hidden group">
<img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1025/600/400" alt="Gallery Image 3">
<div class="absolute inset-0 bg-orange-500 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
</div>
<div class="p-5 flex-grow flex flex-col">
<h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">Responsive Reporting</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Reports that look great on any device, any time.</p>
</div>
</div>
<!-- Gallery Item 4 -->
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
<div class="relative pb-2/3 overflow-hidden group">
<img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1057/600/400" alt="Gallery Image 4">
<div class="absolute inset-0 bg-yellow-600 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
</div>
<div class="p-5 flex-grow flex flex-col">
<h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">API Integration UI</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Simplified user interfaces for complex integrations.</p>
</div>
</div>
<!-- Gallery Item 5 -->
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
<div class="relative pb-2/3 overflow-hidden group">
<img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1074/600/400" alt="Gallery Image 5">
<div class="absolute inset-0 bg-red-600 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
</div>
<div class="p-5 flex-grow flex flex-col">
<h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">Mobile-First Design</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Experience the best on any mobile device.</p>
</div>
</div>
<!-- Gallery Item 6 -->
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
<div class="relative pb-2/3 overflow-hidden group">
<img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1080/600/400" alt="Gallery Image 6">
<div class="absolute inset-0 bg-orange-600 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
</div>
<div class="p-5 flex-grow flex flex-col">
<h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">Customization Options</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Giving users the power to personalize their experience.</p>
</div>
</div>
</div>
</div>
</section>Composants associés
Composant Galerie
Un composant de galerie simple utilisant Tailwind CSS, mettant en œuvre un style de conception Brutalism avec une palette de couleurs triadique et la prise en charge du thème sombre pour présenter des travaux ou des produits.
Galerie de produits e-commerce
Il s’agit d’un composant de galerie complexe, réactif et compatible avec les thèmes sombres, avec un design minimaliste, une palette de couleurs complémentaires et plusieurs éléments interactifs adaptés au commerce électronique.
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.