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.
HTML Code
<div class="container mx-auto p-6 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-lg"> <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">Gallery</h1> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=1" alt="Gallery Image 1" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 1</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=2" alt="Gallery Image 2" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 2</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=3" alt="Gallery Image 3" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 3</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=4" alt="Gallery Image 4" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 4</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=5" alt="Gallery Image 5" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 5</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=6" alt="Gallery Image 6" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 6</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> </div> <div class="mt-6 text-center"> <h3 class="text-lg font-bold text-gray-700 dark:text-gray-300">Author</h3> <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar" class="mx-auto rounded-full w-24 h-24"> <p class="text-gray-600 dark:text-gray-400">Author Name</p> </div></div>Composants associés
Composant Galerie
Composant de galerie réactif conçu dans Material Design avec une palette de couleurs analogue à l’aide d’un tableau de bord.
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 simple utilisant Tailwind CSS, mettant en œuvre un style de conception Brutalism avec une palette de couleurs triadique et la prise en charge du thème sombre pour présenter des travaux ou des produits.