CCHub Logo CCHub Tailwind Collection
Komponenten Sticky Navigation Sticky Navigation-Komponente - Dunkler Modus Pastell

Sticky Navigation-Komponente - Dunkler Modus Pastell

Eine klebrige Navigationsleiste für den Dunkelmodus mit einem responsiven Layout und pastellfarbenen Akzenten. Die Navigationsleiste verbleibt beim Scrollen des Benutzers am oberen Rand des Viewports, wodurch die Benutzerfreundlichkeit für inhaltsintensive Seiten verbessert wird. Es enthält Platzhalter für ein Logo oder einen Website-Titel sowie Navigationslinks, die mit Tailwind CSS gestaltet sind, um ein modernes, sauberes Aussehen zu erzielen.

Vorschau

HTML-Code 

<nav class="dark:bg-gray-900 dark:text-gray-200 bg-gray-100 text-gray-800 shadow-md sticky top-0 z-50">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <!-- Logo or Site Title -->
    <div class="text-lg font-bold">
      <a href="#" class="dark:text-pink-300 text-purple-600 hover:dark:text-pink-400 hover:text-purple-700">Your Logo</a>
    </div>
    <!-- Navigation Links -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">Home</a>
      <a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">About</a>
      <a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">Services</a>
      <a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">Contact</a>
    </div>
    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button class="focus:outline-none">
        <svg class="w-6 h-6" 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 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>
  </div>
  <!-- Mobile Menu (Dropdown - hidden by default) -->
  <div class="md:hidden border-t dark:border-gray-700 border-gray-200">
    <a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">Home</a>
    <a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">About</a>
    <a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">Services</a>
    <a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">Contact</a>
  </div>
</nav>

Verwandte Komponenten

Sticky Navigation-Komponente

Eine Sticky-Navigationskomponente im brutalistischen Stil, die sich für Social-Media-Schnittstellen eignet, mit einem auffälligen, kontrastreichen Design und Unterstützung für den Dunkelmodus.

Offen

Klebrige Navigationskomponente - Neumorphes Pastell

Eine komplexe, klebrige Navigationskomponente mit einem Neumorphism-Designstil und einem pastellfarbenen Farbschema, das sich für Dokumentations- oder Wiki-Seiten eignet. Es verfügt über verschachtelte Navigationselemente, eine Suchleiste und Unterstützung für den Dunkelmodus, die alle mit HTML und Tailwind CSS implementiert sind, um eine vollständige Reaktionsfähigkeit zu gewährleisten.

Offen

Retro E-commerce Sticky Navigation

Eine Retro-/Vintage-Sticky-Navigationskomponente für E-Commerce-Websites mit lebendigen Farben, komplexen Elementen, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen