Composant Galerie
Un composant de galerie de style brutaliste conçu pour la consommation de blog ou de contenu, avec une mise en page réactive avec prise en charge du thème sombre.
HTML Code
<div class="p-5 bg-gray-100 dark:bg-gray-900">
<h1 class="text-3xl text-gray-800 dark:text-gray-200 font-bold mb-4">Gallery</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=1" alt="Gallery Image" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 1</h2>
<p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=2" alt="Gallery Image" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 2</h2>
<p class="text-gray-700 dark:text-gray-300">Vivamus lacinia odio vitae vestibulum. Praesent feugiat amet et ligula.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=3" alt="Gallery Image" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 3</h2>
<p class="text-gray-700 dark:text-gray-300">Ut enim ad minima veniam, quis nostrum exercitationem ullam.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=4" alt="Gallery Image" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 4</h2>
<p class="text-gray-700 dark:text-gray-300">Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=5" alt="Gallery Image" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 5</h2>
<p class="text-gray-700 dark:text-gray-300">At vero eos et accusamus et iusto odio dignissimos ducimus.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=6" alt="Gallery Image" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 6</h2>
<p class="text-gray-700 dark:text-gray-300">Mollitia animi, id est laborum et dolorum fuga. Et harum quidem.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=7" alt="Gallery Image" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 7</h2>
<p class="text-gray-700 dark:text-gray-300">Excepteur sint occaecat cupidatat non proident, sunt in culpa.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=8" alt="Gallery Image" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 8</h2>
<p class="text-gray-700 dark:text-gray-300">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit.</p>
</div>
</div>
</div>Composants associés
Composant Galerie
Un composant de galerie de style rétro vintage avec des effets réactifs et la prise en charge du thème sombre.
Event_Gallery_Component
Un composant de galerie réactif pour les sites Web d’événements et de conférences, avec des tons de bijoux, des dégradés de couleurs, des transitions fluides et la prise en charge du mode sombre. Il présente les moments forts de l’événement ou les images des intervenants dans une grille visuellement attrayante.
JewelTone_Photography_Gallery
Un composant de galerie de photographie complexe et réactif avec des couleurs de bijou et une mise en page typographique épurée, avec des systèmes de grille et la prise en charge du mode sombre. Idéal pour les portfolios de photographes.