Componente della galleria di neumorfismo
Un componente reattivo della galleria neumorfica con supporto per la modalità scura. Le immagini sono segnaposto da picsum.photos e avatar da randomuser.me.
Codice HTML
<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>Componenti correlati
Componente Galleria
Un componente galleria reattivo che utilizza Tailwind CSS con design Skeuomorphism, combinazione di colori pastello e complessità moderata per scopi di social media. Include il supporto per la modalità oscura e utilizza picsum.photos per le immagini e randomuser.me per gli avatar.
Componente Galleria
Un componente galleria reattivo con microinterazioni per i social media, progettato con un tema scuro e un layout semplice utilizzando Tailwind CSS.
Componente Galleria
Componente Galleria reattiva con design 3D, combinazione di colori analoga e supporto della modalità oscura per le interfacce dei social media.