Componente de navegación pegajosa
Un componente de navegación pegajoso con diseño de neumorfismo, combinación de colores complementaria, complejidad moderada y compatibilidad con temas oscuros receptivos para un tablero. El diseño incorpora sombras suaves para el efecto Neumorphism y utiliza colores complementarios para crear una interfaz visualmente atractiva. Es adecuado para un panel de control que proporciona visualización de datos y paneles de control.
Código HTML
<nav class="dark:bg-gray-800 dark:text-gray-200 bg-gray-200 text-gray-800 p-4 sticky top-0 z-50 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<div class="container mx-auto flex items-center justify-between">
<div class="text-2xl font-semibold">Dashboard</div>
<ul class="flex space-x-6">
<li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Overview</a></li>
<li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Analytics</a></li>
<li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Reports</a></li>
<li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Settings</a></li>
</ul>
<div class="flex items-center space-x-4">
<img class="w-8 h-8 rounded-full"
src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<button class="dark:text-gray-200 text-gray-800 focus:outline-none">
<svg class="w-6 h-6" 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="M12 3v1m0 16v1m9-9h1M3 12H2m8.003-9.127a9.006 9.006 0 00-7.872 7.872m15.744 0A9.006 9.006 0 0112 21.003m-4.127-8.003a9.006 9.006 0 017.872-7.872m0 15.744a9.006 9.006 0 00-7.872-7.872"></path>
</svg>
</button>
</div>
</div>
<style>
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #323232;
}
</style>
</nav>Componentes relacionados
Componente de navegación pegajosa
Un componente de navegación pegajoso complejo y sensible con una estética de diseño 3D y una paleta de colores bosque/verde, adecuado para aplicaciones médicas/sanitarias. Incluye soporte para modo oscuro y elementos interactivos.
Componente de navegación pegajosa
Una barra de navegación pegajosa y receptiva con efectos de neón/brillo, adecuada para plataformas educativas o de aprendizaje. Cuenta con un esquema de color púrpura/violeta, compatibilidad con el modo oscuro y elementos de menú interactivos.
Brutalismo Navegación pegajosa
Un complejo componente de navegación pegajosa con diseño brutalista, combinación de colores monocromática, diseñado para carteras, con diseño receptivo y compatibilidad con modo oscuro mediante Tailwind CSS.