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 Rétro
Un composant de galerie réactif avec un style rétro/vintage, une palette de couleurs vives et une mise en page simple pour la consommation de blog/contenu, avec prise en charge du mode sombre. Utilise Tailwind CSS.
Galerie de crypto-monnaies skeuomorphes
Un composant de galerie skeuomorphe complexe conçu pour les applications de crypto-monnaie et de blockchain, avec des couleurs complémentaires, une réactivité et une prise en charge du mode sombre. Il imite des éléments du monde réel tels que des boutons encastrés et des cadres en relief.
Galerie de produits e-commerce
Un composant de galerie de produits minimaliste et réactif pour le commerce électronique, avec des tons océan/bleu, la prise en charge du mode sombre et l’affichage interactif des images.