CCHub Logo CCHub Tailwind Collection
Komponenten Komponenten zur Verbesserung der Navigation Komponente "Navigationsverbesserungskomponenten"

Komponente "Navigationsverbesserungskomponenten"

Eine komplexe, brutalistisch anmutende Navigationskomponente für Unternehmenswebsites mit analogem Farbschema, responsivem Design und Unterstützung des Dunkelmodus. Zeichnet sich durch ungewöhnliche Layouts und hohen Kontrast aus.

Vorschau

HTML-Code 

<nav class="bg-blue-200 dark:bg-gray-900 p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center flex-wrap">
    <div class="text-xl font-bold text-blue-800 dark:text-blue-200 uppercase tracking-widest">Company Name</div>
    <div class="block lg:hidden">
      <button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-blue-800 border-blue-800 dark:text-blue-200 dark:border-blue-200">
        <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"/></svg>
      </button>
    </div>
    <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block" id="nav-content">
      <ul class="lg:flex items-center justify-end flex-1">
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Home</a>
        </li>
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">About</a>
        </li>
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Services</a>
        </li>
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Contact</a>
        </li>
         <li class="my-2 lg:my-0">
          <div class="relative">
            <button class="bg-blue-800 dark:bg-blue-200 text-blue-200 dark:text-blue-800 font-bold uppercase py-2 px-4 border border-blue-800 dark:border-blue-200 rounded">
              Dropdown
            </button>
            <div class="absolute right-0 mt-2 w-48 bg-blue-200 dark:bg-gray-700 rounded shadow-lg py-2 z-10 hidden">
              <a href="#" class="block px-4 py-2 text-blue-800 dark:text-blue-200 hover:bg-blue-300 dark:hover:bg-gray-600">Link 1</a>
              <a href="#" class="block px-4 py-2 text-blue-800 dark:text-blue-200 hover:bg-blue-300 dark:hover:bg-gray-600">Link 2</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

Verwandte Komponenten

Komponenten zur Verbesserung der Navigation

Eine Navigationskomponente, die mit Skeuomorphismus entwickelt wurde und digitale Elemente enthält, die reale Gegenstücke nachahmen. Es wird mit Tailwind CSS mit responsiven Effekten und Unterstützung für dunkle Themen gestaltet.

Offen

Komponenten zur Verbesserung der Navigation

Eine Retro/Vintage-Navigationsleiste mit einem komplexen Design für professionelle Websites, mit triadischem Farbschema und reaktionsschneller Unterstützung für dunkle Themen.

Offen

E-Commerce Industrielle Navigation

Eine komplexe, industrielle E-Commerce-Navigationskomponente mit ästhetischen Rohstoffen und freiliegenden Elementen. Verfügt über ein monochromes Schwarz-Weiß-Schema mit hellem Akzent, vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.

Offen