Componentes Componentes de navegación Componente de componentes de navegación

Componente de componentes de navegación

Un componente de navegación responsivo con soporte de modo oscuro usando Tailwind CSS. Incluye un logotipo, enlaces de navegación y un botón de llamada a la acción.

Vista previa

Código HTML

<nav class="bg-gray-900 text-white">
  <div class="container mx-auto px-6 py-4">
    <div class="flex justify-between items-center">
      <div class="flex items-center">
        <svg class="w-8 h-8 fill-current text-white mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
        <span class="text-xl font-bold">MyCompany</span>
      </div>
      <div class="hidden md:flex space-x-4">
        <a href="#" class="hover:text-purple-400">Home</a>
        <a href="#" class="hover:text-purple-400">About</a>
        <a href="#" class="hover:text-purple-400">Services</a>
        <a href="#" class="hover:text-purple-400">Contact</a>
      </div>
      <div class="hidden md:block">
        <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-full">Get Started</button>
      </div>
      <div class="md:hidden">
        <button class="text-white focus:outline-none">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
        </button>
      </div>
    </div>
  </div>
</nav>

Componentes relacionados

Navegación de cartera en modo oscuro

Un componente de navegación complejo y receptivo para un sitio web de cartera, con una interfaz de usuario de modo oscuro con colores análogos, diseñada para mostrar trabajos o productos. Incluye diseños de escritorio, tableta y móvil con menús desplegables y avatar de usuario.

Abrir

Componentes de navegación

Una barra de navegación de modo oscuro con diseño responsivo, con un logotipo, un avatar y enlaces para la navegación.

Abrir

Glassmorphism_Navigation_Simple_Sunset

Un componente de navegación de glassmorphism simple y receptivo con tonos cálidos/atardeceres, adecuado para sitios web comerciales/corporativos. Cuenta con elementos translúcidos y admite el modo oscuro.

Abrir