Navegación pegajosa brutalista
Un componente de navegación pegajoso de estilo brutalista con comportamiento responsivo y compatibilidad con el modo oscuro mediante Tailwind CSS. Presenta alto contraste, tipografía audaz y una estética cruda y cruda.
Código HTML
<header class="bg-yellow-400 text-black sticky top-0 z-50 border-b-4 border-black dark:bg-purple-800 dark:text-white dark:border-white">
<nav class="container mx-auto px-6 py-4 flex justify-between items-center">
<div class="text-2xl font-bold uppercase tracking-tighter">Brutal Nav</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="text-black hover:underline dark:text-white">Home</a>
<a href="#" class="text-black hover:underline dark:text-white">About</a>
<a href="#" class="text-black hover:underline dark:text-white">Services</a>
<a href="#" class="text-black hover:underline dark:text-white">Contact</a>
</div>
<button class="md:hidden text-black dark:text-white 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 12h16m-4 6h4"></path></svg>
</button>
</nav>
</header>Componentes relacionados
Componente de navegación pegajosa
Una barra de navegación fija y receptiva que sigue las pautas de Material Design, con un modo oscuro.
Componente de navegación pegajosa
Un componente de navegación pegajoso diseñado para el modo oscuro con efectos responsivos mediante Tailwind CSS.
Componente de navegación pegajosa
Una barra de navegación fija limpia, confiable y receptiva diseñada con un esquema de color pastel para uso corporativo/profesional, adecuada para aplicaciones meteorológicas/climáticas. Incluye soporte para modo oscuro.