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 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.
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.
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.