CCHub Logo CCHub Tailwind Collection
Komponenten Navigation Dashboard-Navigation (Material Design)

Dashboard-Navigation (Material Design)

Material Design Dashboard-Navigationskomponente mit triadischem Farbschema und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<nav class="bg-white dark:bg-gray-800 shadow">
  <div class="container mx-auto px-6 py-3">
    <div class="flex items-center justify-between">
      <div class="text-gray-800 dark:text-white font-bold text-xl">Dashboard</div>
      <div class="flex space-x-4">
        <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Home</a>
        <a href="#" class="text-gray-800 dark:text-white hover:text-teal-500 dark:hover:text-teal-400 transition duration-300">Analytics</a>
        <a href="#" class="text-gray-800 dark:text-white hover:text-red-500 dark:hover:text-red-400 transition duration-300">Settings</a>
      </div>
    </div>
  </div>
</nav>

Verwandte Komponenten

Navigationskomponente

Eine einfache Navigationskomponente, die für einen Blog mit Mikrointeraktionen und pastellfarbenem Farbschema entwickelt wurde. Es verfügt über ein responsives Layout und Unterstützung für dunkle Themen.

Offen

Navigationskomponente

Eine reaktionsschnelle Navigationskomponente, die mit Tailwind CSS für den Dunkelmodus formatiert wurde.

Offen

3D-Navigationskomponente

Eine reaktionsschnelle 3D-Navigationskomponente, die mit Tailwind CSS entwickelt wurde, mit Unterstützung für dunkle Themen und ansprechenden dreidimensionalen Elementen.

Offen