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.
HTML Code
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
<img src="https://picsum.photos/200/300?random=1" alt="Random Image 1" class="w-full h-auto object-cover">
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
<img src="https://picsum.photos/200/300?random=2" alt="Random Image 2" class="w-full h-auto object-cover">
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
<img src="https://picsum.photos/200/300?random=3" alt="Random Image 3" class="w-full h-auto object-cover">
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
<img src="https://picsum.photos/200/300?random=4" alt="Random Image 4" class="w-full h-auto object-cover">
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
<img src="https://picsum.photos/200/300?random=5" alt="Random Image 5" class="w-full h-auto object-cover">
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
<img src="https://picsum.photos/200/300?random=6" alt="Random Image 6" class="w-full h-auto object-cover">
</div>
</div>
</div>Composants associés
Galerie de mode et de beauté pour les entreprises/professionnelles
Un composant de galerie d’images propre, fiable et réactif adapté aux marques de mode et de beauté d’entreprise, doté d’une palette de couleurs triadique et d’une prise en charge du mode sombre.
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.