Brutalismo Navegación pegajosa
Un complejo componente de navegación pegajosa con diseño brutalista, combinación de colores monocromática, diseñado para carteras, con diseño receptivo y compatibilidad con modo oscuro mediante Tailwind CSS.
Código HTML
<header class="text-gray-600 dark:text-gray-400 body-font sticky top-0 z-50 bg-white dark:bg-gray-900 border-b-4 border-black dark:border-white">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a class="flex title-font font-medium items-center text-gray-900 dark:text-white mb-4 md:mb-0">
<span class="text-xl border-4 border-black dark:border-white p-2 font-bold">BRUTALIST NAV</span>
</a>
<nav class="md:ml-auto flex flex-wrap items-center text-base justify-center font-bold">
<a href="#" class="mr-5 hover:text-gray-900 dark:hover:text-white border-b-4 border-transparent hover:border-black dark:hover:border-white transition duration-300 ease-in-out">Home</a>
<a href="#" class="mr-5 hover:text-gray-900 dark:hover:text-white border-b-4 border-transparent hover:border-black dark:hover:border-white transition duration-300 ease-in-out">About</a>
<a href="#" class="mr-5 hover:text-gray-900 dark:hover:text-white border-b-4 border-transparent hover:border-black dark:hover:border-white transition duration-300 ease-in-out">Portfolio</a>
<a href="#" class="mr-5 hover:text-gray-900 dark:hover:text-white border-b-4 border-transparent hover:border-black dark:hover:border-white transition duration-300 ease-in-out">Contact</a>
</nav>
<button class="inline-flex items-center bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white py-1 px-3 focus:outline-none hover:bg-gray-200 dark:hover:bg-gray-700 text-base mt-4 md:mt-0 font-bold">
Hire Me
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</div>
</header>Componentes relacionados
Componente de navegación pegajosa
Un componente de navegación pegajoso diseñado en un estilo skeuomórfico, que muestra colores complementarios, adecuado para una cartera con una interfaz rica.
Componente de navegación pegajosa
Una barra de navegación compleja, esqueuomórfica y pegajosa con colores vibrantes, diseñada para interfaces de redes sociales. Incluye diseño responsivo y soporte para el modo oscuro usando Tailwind CSS. Cuenta con imagen de perfil, barra de búsqueda, notificaciones e iconos de mensajería.
Navegación pegajosa de Cyberpunk
Una barra de navegación sensible y pegajosa con un estilo cyberpunk, con tonos cálidos/atardeceres, adecuada para interfaces financieras/bancarias. Incluye soporte para modo oscuro y elementos interactivos.