Componente de la galería de neumorfismo
Un componente de galería neumórfica sensible con soporte para modo oscuro. Las imágenes son marcadores de posición de picsum.photos y los avatares de randomuser.me.
Código 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>Componentes relacionados
Componente de galería meteorológica lúdica
Un componente de galería receptivo y lúdico para datos meteorológicos o climáticos, con elementos redondeados, colores apagados y compatibilidad con el modo oscuro. Muestra imágenes relacionadas con el clima con descripciones.
Componente de galería
Un componente de galería de imágenes simple y receptivo diseñado para sitios web comerciales / corporativos, con un esquema de color triádico inspirado en los principios de Material Design. Incluye un tema oscuro para las preferencias del usuario y utiliza un diseño basado en cuadrículas.
JewelTone_Photography_Gallery
Un componente de galería de fotografía complejo y receptivo con colores en tonos joya y un diseño tipográfico limpio, con sistemas de cuadrícula y compatibilidad con el modo oscuro. Ideal para portafolios de fotógrafos.