Componente de la barra de navegación 16
Un componente de barra de navegación de diseño plano minimalista con efectos responsivos y soporte para temas oscuros.
Código HTML
<nav class="bg-white dark:bg-gray-800 shadow-lg">
<div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex-shrink-0">
<a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">Brand</a>
</div>
<div class="hidden md:flex md:space-x-8">
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Services</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
</div>
</div>
<div class="hidden md:flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border border-gray-300 dark:border-gray-700"
/>
</div>
<div class="-mr-2 flex md:hidden">
<button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800">
<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>
</div>
</div>
<div class="md:hidden">
<a href="#" class="block text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium">Home</a>
<a href="#" class="block text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium">About</a>
<a href="#" class="block text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium">Services</a>
<a href="#" class="block text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium">Contact</a>
</div>
</nav>
Componentes relacionados
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.
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
Un componente de barra de navegación responsivo diseñado en un estilo skeuomórfico con soporte de temas oscuros mediante Tailwind CSS.