CCHub Logo CCHub Tailwind Collection
Komponenten Sticky Navigation Brutalistische Sticky Navigation

Brutalistische Sticky Navigation

Eine Sticky-Navigationskomponente im brutalistischen Stil mit reaktionsschnellem Verhalten und Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Zeichnet sich durch hohen Kontrast, fette Typografie und eine starke, rohe Ästhetik aus.

Vorschau

HTML-Code 

<header class="bg-yellow-400 text-black sticky top-0 z-50 border-b-4 border-black dark:bg-purple-800 dark:text-white dark:border-white">
  <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
    <div class="text-2xl font-bold uppercase tracking-tighter">Brutal Nav</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-black hover:underline dark:text-white">Home</a>
      <a href="#" class="text-black hover:underline dark:text-white">About</a>
      <a href="#" class="text-black hover:underline dark:text-white">Services</a>
      <a href="#" class="text-black hover:underline dark:text-white">Contact</a>
    </div>
    <button class="md:hidden text-black dark:text-white 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>
  </nav>
</header>

Verwandte Komponenten

Sticky Navigation-Komponente

Sticky Navigation Component mit Skeuomorphism-Design, responsivem Design und Unterstützung für dunkle Themen. Verwendet Tailwind CSS.

Offen

Sticky Navigation-Komponente

Eine minimalistische und reaktionsschnelle Sticky-Navigationsleiste für Blogs mit einem lebendigen Farbschema. Es unterstützt den Dunkelmodus und hat ein einfaches, übersichtliches Layout mit "Blog Title" auf der linken Seite und Navigationslinks auf der rechten Seite. Die Navigationsleiste bleibt am oberen Rand des Viewports, wenn der Benutzer einen Bildlauf durchführt.

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