Barra de navegación minimalista
Un componente de barra de navegación receptivo diseñado en un estilo minimalista, compatible con el tema oscuro y que utiliza Tailwind CSS.
Código HTML
<nav class="bg-white dark:bg-gray-800 shadow-md">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex-shrink-0">
<img class="h-8" src="https://picsum.photos/40/40" alt="Logo">
</div>
<div class="hidden md:flex md:space-x-8">
<a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Home</a>
<a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">About</a>
<a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Services</a>
<a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Contact</a>
</div>
</div>
<div class="flex items-center">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
</div>
</div>
</div>
</nav>
<!-- Mobile menu button -->
<div class="md:hidden">
<button class="flex items-center p-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none" aria-label="Toggle Navigation">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
<!-- Mobile Menu -->
<div class="md:hidden">
<div class="bg-white dark:bg-gray-800 shadow-md px-4 py-2 space-y-2">
<a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Home</a>
<a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">About</a>
<a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Services</a>
<a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Contact</a>
</div>
</div>Componentes relacionados
Componente de la barra de navegación
Un componente de barra de navegación responsivo simple diseñado para un tablero, con un esquema de color monocromático y microinteracciones. Incluye un soporte de modo oscuro con efectos de desplazamiento para animaciones atractivas.
Componente de la barra de navegación
Una barra de navegación receptiva con microinteracciones y soporte de modo oscuro usando Tailwind CSS.
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.