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

Barra de navegación retro de comercio electrónico

Un componente de navegación en escala de grises de estilo retro/vintage para el comercio electrónico, que presenta una complejidad moderada con elementos interactivos como desplazamientos y menús desplegables. Es responsivo e incluye soporte para el modo oscuro usando Tailwind CSS.

Abrir

Componente de navegación Brutalismo

Un componente de navegación responsivo diseñado en un estilo brutalista, que muestra un esquema de color monocromático, ideal para un sitio web de portafolio. Las características incluyen un diseño audaz con alto contraste, compatibilidad con el modo oscuro con Tailwind CSS y elementos interactivos como menús desplegables o enlaces de botones.

Abrir

Navegación por neumorfismo

Un componente de navegación responsivo simple con estilo Neumorphism para el comercio electrónico.

Abrir