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

Navigations-Komponenten

Eine minimalistische Navigationskomponente für eine E-Commerce-Website mit Logo, Suchleiste, Navigationslinks, Warenkorbsymbol und Benutzeravatar mit Tailwind CSS. Diese Komponente unterstützt responsives Design und den Dunkelmodus.

Offen

Verspielte Dashboard-Navigation

Eine einfache, verspielte und reaktionsschnelle Dashboard-Navigationskomponente mit Juwelentönen mit abgerundeten Elementen und vollständiger Unterstützung des Dunkelmodus.

Offen

Komponente "Navigationskomponenten"

Eine reaktionsschnelle Navigationskomponente mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Es enthält ein Logo, Navigationslinks und einen Call-to-Action-Button.

Offen