Componente de navegación de neumorfismo
Componente de navegación de neumorfismo optimizado para sitios web de portafolio. Cuenta con un diseño complejo con múltiples elementos interactivos, un diseño responsivo y compatibilidad con el modo oscuro mediante Tailwind CSS. El esquema de color es análogo.
Código HTML
<nav class="p-6 bg-gray-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<div class="container mx-auto flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
<span class="text-xl font-bold text-gray-800 dark:text-gray-200">Your Name</span>
</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">About</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Portfolio</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Contact</a>
</div>
<div class="md:hidden">
<button class="text-gray-600 dark:text-gray-400 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="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
</div>
</div>
<div class="mobile-menu hidden md:hidden mt-4 space-y-2">
<a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Home</a>
<a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">About</a>
<a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Portfolio</a>
<a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Contact</a>
</div>
</nav>
<style>
.shadow-neumorphic-light {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 7px 7px 15px #333333, -7px -7px 15px #555555;
}
.shadow-neumorphic-inset-light {
box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
}
.shadow-neumorphic-text-light {
text-shadow: 2px 2px 5px #a7a7a7, -2px -2px 5px #ffffff;
}
.dark .shadow-neumorphic-text-dark {
text-shadow: 2px 2px 5px #333333, -2px -2px 5px #555555;
}
</style>Componentes relacionados
Navegación retro de comercio electrónico
Componente de navegación receptivo con diseño retro/vintage, tonos tierra y soporte de modo oscuro para comercio electrónico.
Componente de navegación 3D
Un componente de navegación 3D receptivo diseñado para el comercio electrónico, con un esquema de color en escala de grises y soporte para el modo oscuro.
Navegación minimalista de comida/restaurante en tono joya
Un componente de navegación minimalista y receptivo para sitios web de alimentos y restaurantes, con tonos joya, soporte para modo oscuro y un diseño plano y limpio. Incluye un logotipo, enlaces de navegación y un botón de llamada a la acción, con un menú de hamburguesas apto para dispositivos móviles.