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