Componente Componentes de mejora de navegación
Un componente de navegación complejo de estilo brutalista para sitios web corporativos con una combinación de colores análoga, diseño receptivo y compatibilidad con el modo oscuro. Presenta diseños inusuales y alto contraste.
Código HTML
<nav class="bg-blue-200 dark:bg-gray-900 p-4 shadow-lg">
<div class="container mx-auto flex justify-between items-center flex-wrap">
<div class="text-xl font-bold text-blue-800 dark:text-blue-200 uppercase tracking-widest">Company Name</div>
<div class="block lg:hidden">
<button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-blue-800 border-blue-800 dark:text-blue-200 dark:border-blue-200">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"/></svg>
</button>
</div>
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block" id="nav-content">
<ul class="lg:flex items-center justify-end flex-1">
<li class="mr-6 my-2 lg:my-0">
<a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Home</a>
</li>
<li class="mr-6 my-2 lg:my-0">
<a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">About</a>
</li>
<li class="mr-6 my-2 lg:my-0">
<a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Services</a>
</li>
<li class="mr-6 my-2 lg:my-0">
<a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Contact</a>
</li>
<li class="my-2 lg:my-0">
<div class="relative">
<button class="bg-blue-800 dark:bg-blue-200 text-blue-200 dark:text-blue-800 font-bold uppercase py-2 px-4 border border-blue-800 dark:border-blue-200 rounded">
Dropdown
</button>
<div class="absolute right-0 mt-2 w-48 bg-blue-200 dark:bg-gray-700 rounded shadow-lg py-2 z-10 hidden">
<a href="#" class="block px-4 py-2 text-blue-800 dark:text-blue-200 hover:bg-blue-300 dark:hover:bg-gray-600">Link 1</a>
<a href="#" class="block px-4 py-2 text-blue-800 dark:text-blue-200 hover:bg-blue-300 dark:hover:bg-gray-600">Link 2</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>Componentes relacionados
Componente de mejora de la navegación
Un componente de navegación responsivo diseñado para el modo oscuro con Tailwind CSS, con marcadores de posición para logotipos, imágenes y avatares.
Componentes de mejora de la navegación
Un componente de navegación diseñado con una estética brutalista, con diseños atrevidos, alto contraste y diseños inusuales. Incluye efectos responsivos y admite temas oscuros con CSS.
Componente de mejora de la navegación
Un componente de navegación inspirado en el morfismo de vidrio diseñado para mostrar el trabajo de la cartera y los productos compatibles con tonos tierra y modo oscuro. El componente presenta un efecto de vidrio esmerilado, un diseño receptivo y elementos mínimos.