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

Navigationskomponente "Brutalismus"

Eine reaktionsschnelle Navigationskomponente im brutalistischen Stil mit einem monochromen Farbschema, ideal für eine Portfolio-Website. Zu den Funktionen gehören ein fettes Layout mit hohem Kontrast, Unterstützung für den Dunkelmodus mit Tailwind CSS und interaktive Elemente wie Dropdowns oder Schaltflächenlinks.

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

Navigations-Komponenten

Eine reaktionsschnelle Navigationskomponente mit Mikrointeraktionen und Unterstützung für dunkle Themen, die mit Tailwind CSS entwickelt wurde.

Offen