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.
HTML Code
<div class="bg-gray-800 dark:bg-gray-900 p-6">
<h1 class="text-4xl font-bold text-green-400 mb-4">Gallery</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/400/300?random=1" alt="Gallery Image 1" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-pink-400">Project Title 1</h2>
<p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
<div class="mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
<span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
</div>
</div>
</div>
<div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/400/300?random=2" alt="Gallery Image 2" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-pink-400">Project Title 2</h2>
<p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
<div class="mt-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
<span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
</div>
</div>
</div>
<div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/400/300?random=3" alt="Gallery Image 3" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-pink-400">Project Title 3</h2>
<p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
<div class="mt-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
<span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
</div>
</div>
</div>
<div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/400/300?random=4" alt="Gallery Image 4" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-pink-400">Project Title 4</h2>
<p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
<div class="mt-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
<span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Galerie
Composant de galerie réactif conçu dans Material Design avec une palette de couleurs analogue à l’aide d’un tableau de bord.
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.
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.