Componente de componentes de navegación
Un componente de navegación retro-vintage para un tablero, con un diseño complejo con colores complementarios, diseño receptivo y soporte de temas oscuros con Tailwind CSS. Incluye un logotipo, enlaces de navegación, una barra de búsqueda e información de perfil de usuario.
Código HTML
<nav class="bg-gradient-to-r from-purple-800 to-indigo-800 dark:from-gray-900 dark:to-gray-700 p-4 shadow-lg">
<div class="container mx-auto flex flex-wrap items-center justify-between">
<div class="flex items-center space-x-4">
<a href="#" class="text-white text-3xl font-bold font-mono tracking-wider">RETRO-DASH</a>
<div class="hidden md:flex space-x-6 ml-8">
<a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Dashboard</a>
<a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
<a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
<a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
</div>
</div>
<div class="flex items-center space-x-6 mt-4 md:mt-0">
<div class="relative">
<input type="text" placeholder="Search..." class="bg-purple-700 dark:bg-gray-800 text-white placeholder-purple-300 dark:placeholder-gray-500 rounded-full py-2 pl-4 pr-10 focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-gray-600 transition duration-300 ease-in-out w-48 md:w-64">
<svg class="w-5 h-5 text-purple-300 dark:text-gray-500 absolute right-3 top-2.5" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
<div class="relative group">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-purple-400 dark:border-gray-600 cursor-pointer">
<div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-xl py-1 hidden group-hover:block transition duration-300 ease-in-out z-10">
<a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-gray-700">Profile</a>
<a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-gray-700">Settings</a>
<a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-gray-700">Logout</a>
</div>
</div>
<button class="md:hidden text-white focus:outline-none">
<svg class="w-8 h-8" 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 class="w-full md:hidden mt-4">
<div class="flex flex-col space-y-2">
<a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Dashboard</a>
<a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
<a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
<a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
</div>
</div>
</div>
</nav>Componentes relacionados
Componente de navegación Brutalismo
Un componente de navegación responsivo diseñado en un estilo brutalista, que muestra un esquema de color monocromático, ideal para un sitio web de portafolio. Las características incluyen un diseño audaz con alto contraste, compatibilidad con el modo oscuro con Tailwind CSS y elementos interactivos como menús desplegables o enlaces de botones.
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.
Navegación social brutalista
Un componente de navegación simple y brutalista para las redes sociales con colores complementarios. Incluye diseño responsivo y soporte para modo oscuro.