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
Componente de la barra de navegación
Una barra de navegación responsiva para un tablero, con un tema de modo oscuro con tonos tierra. Incluye un logotipo, enlaces de navegación, una barra de búsqueda y una sección de perfil de usuario. Diseñado para una complejidad moderada con elementos interactivos.
Barra de navegación Skeuomorphic
Una barra de navegación responsiva simple para redes sociales con un estilo de diseño esqueuomórfico, que utiliza un esquema de color análogo y admite el modo oscuro.
Barra de navegación Skeuomorphic
Un componente de barra de navegación de cartera diseñado con estilos skeuomórficos y una combinación de colores pastel, incluida la compatibilidad con el modo oscuro. Cuenta con elementos interactivos como enlaces y un menú desplegable.