Barra de navegación brutalista
Una barra de navegación responsiva diseñada en un estilo brutalista con colores de alta saturación, para el blog y el consumo de contenido, con soporte para temas oscuros.
Código HTML
<nav class="bg-green-600 dark:bg-green-900 p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">Home</a>
<a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">About</a>
<a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">Blog</a>
<a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">Contact</a>
</div>
<div class="hidden md:flex items-center space-x-4">
<a href="#" class="text-white bg-yellow-400 dark:bg-yellow-600 px-4 py-2 rounded-lg hover:bg-yellow-300 dark:hover:bg-yellow-500">Sign In</a>
<a href="#" class="text-white bg-red-500 dark:bg-red-700 px-4 py-2 rounded-lg hover:bg-red-400 dark:hover:bg-red-600">Get Started</a>
</div>
</div>
<div class="md:hidden mt-2">
<button class="text-white rounded-md p-2 hover:bg-yellow-300 dark:hover:bg-yellow-500">
Menu
</button>
</div>
</nav>
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-200 p-4">
<h1 class="text-3xl font-bold">Welcome to My Blog</h1>
<p class="mt-2">Discover amazing articles and content that inspire and educate.</p>
<img class="mt-4 rounded-lg" src="https://picsum.photos/800/400" alt="Random Image">
<div class="flex mt-4 space-x-4">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile Picture">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile Picture">
</div>
</div>Componentes relacionados
Barra de navegación de portafolio
Una barra de navegación responsiva con soporte para temas oscuros, diseñada para un sitio web de portafolio utilizando los principios de Material Design y la combinación de colores de tonos tierra. Incluye un logotipo de marca, enlaces de navegación y un botón de llamada a la acción. El diseño es moderadamente complejo y se adapta a diferentes tamaños de pantalla.
Cyberpunk_Finance_Navbar
Una barra de navegación sencilla y receptiva con temática cyberpunk para aplicaciones financieras/bancarias, con un fondo oscuro, acentos de degradado brillantes y compatibilidad con el modo oscuro.
Neon_Glow_Navbar_Music_Audio
Un componente de barra de navegación complejo y sensible para plataformas de música/audio, con efectos de neón/resplandor y una combinación de colores neutros cálidos. Incluye soporte para modo oscuro y elementos interactivos.