CCHub Logo CCHub Tailwind Collection
Komponenten Navigations-Komponenten Glassmorphism_Navigation_Simple_Sunset

Glassmorphism_Navigation_Simple_Sunset

Eine einfache, reaktionsschnelle Glassmorphism-Navigationskomponente mit Sonnenuntergangs-/Warmtönen, geeignet für Geschäfts-/Unternehmenswebsites. Verfügt über durchscheinende Elemente und unterstützt den Dunkelmodus.

Vorschau

HTML-Code 

<header class="bg-orange-100 dark:bg-gray-900 shadow-lg">
  <nav class="container mx-auto px-4 py-3 flex justify-between items-center">
    <a href="#" class="text-xl font-bold text-orange-700 dark:text-orange-300">YourCompany</a>

    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-orange-600 hover:text-orange-800 dark:text-orange-400 dark:hover:text-amber-200 transition-colors duration-300">Home</a>
      <a href="#" class="text-orange-600 hover:text-orange-800 dark:text-orange-400 dark:hover:text-amber-200 transition-colors duration-300">About</a>
      <a href="#" class="text-orange-600 hover:text-orange-800 dark:text-orange-400 dark:hover:text-amber-200 transition-colors duration-300">Services</a>
      <a href="#" class="text-orange-600 hover:text-orange-800 dark:text-orange-400 dark:hover:text-amber-200 transition-colors duration-300">Contact</a>
    </div>

    <!-- Mobile menu button -->
    <button class="md:hidden focus:outline-none">
      <svg class="w-6 h-6 text-orange-700 dark:text-orange-300" 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 12h16M4 18h16"></path>
      </svg>
    </button>
  </nav>

  <!-- Mobile menu overlay (can be shown/hidden with JS, but per instructions, we just have structure) -->
  <div class="md:hidden fixed top-0 left-0 w-full h-full bg-orange-50 dark:bg-gray-800 bg-opacity-90 dark:bg-opacity-90 backdrop-filter backdrop-blur-md z-50 transform -translate-y-full transition-transform duration-300 ease-in-out">
    <div class="flex flex-col items-center justify-center h-full space-y-6">
        <a href="#" class="text-2xl text-orange-700 hover:text-orange-900 dark:text-orange-300 dark:hover:text-amber-100 transition-colors duration-300">Home</a>
        <a href="#" class="text-2xl text-orange-700 hover:text-orange-900 dark:text-orange-300 dark:hover:text-amber-100 transition-colors duration-300">About</a>
        <a href="#" class="text-2xl text-orange-700 hover:text-orange-900 dark:text-orange-300 dark:hover:text-amber-100 transition-colors duration-300">Services</a>
        <a href="#" class="text-2xl text-orange-700 hover:text-orange-900 dark:text-orange-300 dark:hover:text-amber-100 transition-colors duration-300">Contact</a>
    </div>
  </div>
</header>

Verwandte Komponenten

Komponente "Navigationskomponenten"

Eine komplexe, reaktionsschnelle Navigationskomponente für Dashboards mit Mikrointeraktionen und einem analogen Farbschema mit Unterstützung des Dunkelmodus. Verwendet Tailwind CSS für das Styling und enthält interaktive Elemente, ohne auf JavaScript angewiesen zu sein.

Offen

Portfolio-Navigation im Dunkelmodus

Eine komplexe, reaktionsschnelle Navigationskomponente für eine Portfolio-Website mit einer Dark-Mode-Benutzeroberfläche mit analogen Farben, die zur Präsentation von Arbeiten oder Produkten entwickelt wurde. Enthält Desktop-, Tablet- und mobile Layouts mit Dropdown-Menüs und Benutzer-Avatar.

Offen

Komponente "Navigationskomponenten"

Eine Retro-Vintage-Navigationskomponente für ein Dashboard mit einem komplexen Layout mit Komplementärfarben, responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS. Es enthält ein Logo, Navigationslinks, eine Suchleiste und Benutzerprofilinformationen.

Offen