Composant Neumorphism Gallery
Un composant de galerie Neumorphic réactif avec prise en charge du mode sombre. Les images sont des espaces réservés de picsum.photos et des avatars de randomuser.me.
HTML Code
<div class="container mx-auto p-6 bg-gray-200 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark rounded-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark group hover:shadow-neumorphic-hover-light dark:hover:shadow-neumorphic-hover-dark transition duration-300 ease-in-out">
<img src="https://picsum.photos/seed/1/300/200" alt="Gallery Image 1" class="rounded-md mb-4 shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark">
<p class="text-gray-700 dark:text-gray-300 text-center">Image Description 1</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark group hover:shadow-neumorphic-hover-light dark:hover:shadow-neumorphic-hover-dark transition duration-300 ease-in-out">
<img src="https://picsum.photos/seed/2/300/200" alt="Gallery Image 2" class="rounded-md mb-4 shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark">
<p class="text-gray-700 dark:text-gray-300 text-center">Image Description 2</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark group hover:shadow-neumorphic-hover-light dark:hover:shadow-neumorphic-hover-dark transition duration-300 ease-in-out">
<img src="https://picsum.photos/seed/3/300/200" alt="Gallery Image 3" class="rounded-md mb-4 shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark">
<p class="text-gray-700 dark:text-gray-300 text-center">Image Description 3</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark group hover:shadow-neumorphic-hover-light dark:hover:shadow-neumorphic-hover-dark transition duration-300 ease-in-out">
<img src="https://picsum.photos/seed/4/300/200" alt="Gallery Image 4" class="rounded-md mb-4 shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark">
<p class="text-gray-700 dark:text-gray-300 text-center">Image Description 4</p>
</div>
</div>
</div>
<style>
.shadow-neumorphic-light {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #363636;
}
.shadow-neumorphic-inner-light {
box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-inner-dark {
box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #363636;
}
.shadow-neumorphic-hover-light {
box-shadow: 3px 3px 8px #a7a7a7, -3px -3px 8px #ffffff;
}
.dark .shadow-neumorphic-hover-dark {
box-shadow: 3px 3px 8px #4a4a4a, -3px -3px 8px #363636;
}
</style>Composants associés
Composant Galerie
Un composant de galerie réactif avec un design plat minimaliste, avec des images et une prise en charge du thème sombre à l’aide de Tailwind CSS.
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.
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.