Barra de navegación neumórfica
Una barra de navegación neumórfica simple y receptiva diseñada para plataformas de citas/sociales, que utiliza una paleta de colores bosque/verde con soporte para modo oscuro.
Código HTML
<nav class="p-4 bg-lime-100 dark:bg-emerald-900 shadow-neumorphic-light dark:shadow-neumorphic-dark flex flex-col md:flex-row justify-between items-center rounded-2xl max-w-7xl mx-auto my-8">
<div class="flex items-center space-x-2 mb-4 md:mb-0">
<svg class="w-8 h-8 text-emerald-700 dark:text-lime-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
<span class="text-2xl font-bold text-emerald-800 dark:text-lime-200 font-serif">LoveLink</span>
</div>
<ul class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8 text-lg font-medium text-emerald-700 dark:text-lime-300">
<li>
<a href="#" class="block py-2 px-4 rounded-xl transition-all duration-300 ease-in-out
shadow-neumorphic-inner-light hover:shadow-neumorphic-outer-light
dark:shadow-neumorphic-inner-dark dark:hover:shadow-neumorphic-outer-dark
focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
text-emerald-700 dark:text-lime-300 hover:text-emerald-900 dark:hover:text-lime-100">
Discover
</a>
</li>
<li>
<a href="#" class="block py-2 px-4 rounded-xl transition-all duration-300 ease-in-out
shadow-neumorphic-inner-light hover:shadow-neumorphic-outer-light
dark:shadow-neumorphic-inner-dark dark:hover:shadow-neumorphic-outer-dark
focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
text-emerald-700 dark:text-lime-300 hover:text-emerald-900 dark:hover:text-lime-100">
Messages
</a>
</li>
<li>
<a href="#" class="block py-2 px-4 rounded-xl transition-all duration-300 ease-in-out
shadow-neumorphic-inner-light hover:shadow-neumorphic-outer-light
dark:shadow-neumorphic-inner-dark dark:hover:shadow-neumorphic-outer-dark
focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
text-emerald-700 dark:text-lime-300 hover:text-emerald-900 dark:hover:text-lime-100">
Profile
</a>
</li>
<li>
<a href="#" class="block py-2 px-4 rounded-xl transition-all duration-300 ease-in-out
shadow-neumorphic-inner-light hover:shadow-neumorphic-outer-light
dark:shadow-neumorphic-inner-dark dark:hover:shadow-neumorphic-outer-dark
focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
text-emerald-700 dark:text-lime-300 hover:text-emerald-900 dark:hover:text-lime-100">
Settings
</a>
</li>
</ul>
</nav>
<style>
/* Neumorphic Shadows - You would typically configure these in your tailwind.config.js */
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #9acd32, -6px -6px 12px #e0ffe0;
}
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #104e3b, -6px -6px 12px #268a6f;
}
.shadow-neumorphic-inner-light {
box-shadow: inset 3px 3px 6px #9acd32, inset -3px -3px 6px #e0ffe0;
}
.dark .shadow-neumorphic-inner-dark {
box-shadow: inset 3px 3px 6px #104e3b, inset -3px -3px 6px #268a6f;
}
.shadow-neumorphic-outer-light {
box-shadow: 6px 6px 12px #9acd32, -6px -6px 12px #e0ffe0;
}
.dark .shadow-neumorphic-outer-dark {
box-shadow: 6px 6px 12px #104e3b, -6px -6px 12px #268a6f;
}
/* You'd add these custom styles to your tailwind.config.js extends section for shadows. */
/* Example tailwind.config.js snippet: */
/*
module.exports = {
theme: {
extend: {
colors: {
'lime-100': '#f0fff0',
'emerald-900': '#1a5f4a',
'emerald-700': '#047857',
'emerald-800': '#065f46',
'lime-200': '#d9f99d',
'lime-300': '#bef264',
'emerald-500': '#10b981',
},
boxShadow: {
'neumorphic-light': '6px 6px 12px #9acd32, -6px -6px 12px #e0ffe0',
'neumorphic-dark': '6px 6px 12px #104e3b, -6px -6px 12px #268a6f',
'neumorphic-inner-light': 'inset 3px 3px 6px #9acd32, inset -3px -3px 6px #e0ffe0',
'neumorphic-inner-dark': 'inset 3px 3px 6px #104e3b, inset -3px -3px 6px #268a6f',
'neumorphic-outer-light': '6px 6px 12px #9acd32, -6px -6px 12px #e0ffe0',
'neumorphic-outer-dark': '6px 6px 12px #104e3b, -6px -6px 12px #268a6f',
}
}
},
plugins: [],
}
*/
</style>Componentes relacionados
Componente de navegación retro vintage
Un componente de navegación responsivo diseñado con una estética retro/vintage inspirada en los estilos de los años 80/90, con una combinación de colores pastel. Adecuado para interfaces de redes sociales, incluida la compatibilidad con el modo oscuro.
Componente de navegación skeuomórfica
Un componente de navegación diseñado en un estilo skeuomórfico, con colores vibrantes y un diseño responsivo adecuado para el contenido del blog. Incluye funciones interactivas como efectos de desplazamiento y está optimizado para el modo oscuro.
E-commerce Material Design Navegación
Un componente de navegación de comercio electrónico complejo, receptivo y monocromático inspirado en Material Design, con enlaces de búsqueda, carrito, perfil de usuario y categoría con soporte para modo oscuro.