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.
HTML Code
<div class="bg-gray-200 dark:bg-gray-800 p-6"> <div class="container mx-auto"> <h2 class="text-3xl font-bold mb-6 text-gray-800 dark:text-white">Gallery</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden"> <img src="https://picsum.photos/seed/retro1/500/300" alt="Gallery Image 1" class="w-full h-48 object-cover"> <div class="p-4"> <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 1</h3> <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden"> <img src="https://picsum.photos/seed/retro2/500/300" alt="Gallery Image 2" class="w-full h-48 object-cover"> <div class="p-4"> <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 2</h3> <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden"> <img src="https://picsum.photos/seed/retro3/500/300" alt="Gallery Image 3" class="w-full h-48 object-cover"> <div class="p-4"> <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 3</h3> <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> </div></div>Composants associés
Composant Galerie 3D
Un composant de galerie 3D réactif complexe conçu pour le commerce électronique, avec un thème sombre et une palette de couleurs complémentaire.
Galerie de produits e-commerce
Il s’agit d’un composant de galerie complexe, réactif et compatible avec les thèmes sombres, avec un design minimaliste, une palette de couleurs complémentaires et plusieurs éléments interactifs adaptés au commerce électronique.
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.