Componentes de navegación
Una barra de navegación de modo oscuro con diseño responsivo, con un logotipo, un avatar y enlaces para la navegación.
Código HTML
<nav class="bg-gray-900 text-white p-4 flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Logo" class="w-10 h-10 rounded-full">
<span class="text-xl font-semibold">My Website</span>
</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="hover:text-gray-400 transition duration-200">Home</a>
<a href="#" class="hover:text-gray-400 transition duration-200">About</a>
<a href="#" class="hover:text-gray-400 transition duration-200">Services</a>
<a href="#" class="hover:text-gray-400 transition duration-200">Contact</a>
</div>
<div class="relative">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full cursor-pointer">
<div class="absolute right-0 mt-2 w-48 bg-gray-800 text-white rounded-md shadow-lg hidden group-hover:block">
<a href="#" class="block px-4 py-2 hover:bg-gray-700">Profile</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-700">Settings</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-700">Logout</a>
</div>
</div>
</nav>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a;
}
}
</style>
Componentes relacionados
Componentes de navegación
Un componente de navegación diseñado con un estilo brutalista, con una combinación de colores pastel para las interfaces de redes sociales, con un diseño receptivo y soporte para temas oscuros.
Componente de navegación skeuomórfica
Un componente de navegación diseñado con estilo skeuomórfico, con una combinación de colores complementaria, adecuada para un tablero con visualización de datos y paneles de control. Incluye elementos interactivos para la participación del usuario.
RetroPortfolioNavigation
Componente de navegación retro/vintage para portafolio con combinación de colores pastel, responsivo y compatible con el modo oscuro.