Composant Galerie
Un composant de galerie d’images simple et réactif conçu pour les sites Web d’entreprise, avec une palette de couleurs triadique inspirée des principes de conception matérielle. Il comprend un thème sombre pour les préférences de l’utilisateur et utilise une mise en page basée sur une grille.
HTML Code
<div class="bg-blue-50 dark:bg-gray-900 py-12">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center text-blue-800 dark:text-blue-200 mb-8">Our Work</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/seed/project1/400/300" alt="Project 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-blue-700 dark:text-blue-300 mb-2">Project Alpha</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of Project Alpha, highlighting its key features and success.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/seed/project2/400/300" alt="Project 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-red-700 dark:text-red-300 mb-2">Project Beta</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of Project Beta, highlighting its key features and success.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/seed/project3/400/300" alt="Project 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-green-700 dark:text-green-300 mb-2">Project Gamma</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of Project Gamma, highlighting its key features and success.</p>
</div>
</div>
</div>
</div>
</div>
Composants associés
Composant Galerie
Un composant de galerie réactif utilisant Tailwind CSS avec le style Material Design, adapté à un tableau de bord avec prise en charge du thème sombre.
Composant de galerie météo ludique
Un composant de galerie réactif et ludique pour les données météorologiques ou climatiques, avec des éléments arrondis, des couleurs sourdes et la prise en charge du mode sombre. Affiche des images liées à la météo avec des descriptions.
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.