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.
HTML Code
<div class="container mx-auto p-6">
<h2 class="text-3xl font-bold text-center text-gray-900 dark:text-gray-100 mb-6">Gallery Component</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/300" alt="Image 1" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 1</h3>
<p class="text-gray-600 dark:text-gray-300">Description of image 1.</p>
</div>
<!-- Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/301" alt="Image 2" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 2</h3>
<p class="text-gray-600 dark:text-gray-300">Description of image 2.</p>
</div>
<!-- Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/302" alt="Image 3" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 3</h3>
<p class="text-gray-600 dark:text-gray-300">Description of image 3.</p>
</div>
<!-- Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/303" alt="Image 4" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 4</h3>
<p class="text-gray-600 dark:text-gray-300">Description of image 4.</p>
</div>
<!-- More cards -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/304" alt="Image 5" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 5</h3>
<p class="text-gray-600 dark:text-gray-300">Description of image 5.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/305" alt="Image 6" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 6</h3>
<p class="text-gray-600 dark:text-gray-300">Description of image 6.</p>
</div>
</div>
</div>Composants associés
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 de style Neumorphisme avec des tons de terre à des fins de blog/contenu. Ce composant dispose d’une interface riche avec plusieurs éléments interactifs, d’un design réactif et d’une prise en charge du thème sombre.