Componente de la barra de navegación
Una barra de navegación receptiva con microinteracciones y soporte de modo oscuro usando Tailwind CSS.
Código HTML
<nav class="bg-white dark:bg-gray-800 shadow-md">
<div class="container mx-auto px-6 py-3">
<div class="flex items-center justify-between">
<div class="text-xl font-semibold text-gray-700 dark:text-white">
<a href="#" class="hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out">My Website</a>
</div>
<div class="hidden md:block">
<div class="flex items-center space-x-4">
<a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">Home</a>
<a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">About</a>
<a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">Services</a>
<a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">Contact</a>
</div>
</div>
<div class="md:hidden">
<button class="text-gray-700 dark:text-white focus:outline-none">
<svg viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6">
<path fill-rule="evenodd" d="M4 5h16a1 1 0 010 2H4a1 1 0 110-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2z"></path>
</svg>
</button>
</div>
</div>
</div>
</nav>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.
Componente de la barra de navegación
Una barra de navegación responsiva con microinteracciones atractivas, diseñada para el comercio electrónico, que utiliza un tema oscuro y colores en tonos tierra.
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.