CCHub Logo CCHub Tailwind Collection
Komponenten Navigationsleiste Navigationsleiste für soziale Medien

Navigationsleiste für soziale Medien

Glassmorphism Graustufen Einfache Komponente der Navigationsleiste für soziale Medien

Vorschau

HTML-Code 

<nav class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-gray-800 dark:text-white text-xl font-bold">SocialApp</div>
    <div class="flex space-x-4">
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Feed</a>
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Profile</a>
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Messages</a>
    </div>
  </div>
</nav>

Verwandte Komponenten

Minimalistische Navigationsleiste

Eine reaktionsschnelle Navigationsleistenkomponente in einem minimalistischen Stil, die ein dunkles Design unterstützt und Tailwind CSS verwendet.

Offen

Komponente der Navigationsleiste

Eine einfache, reaktionsschnelle Navigationsleistenkomponente, die für ein Dashboard entwickelt wurde und sich durch ein monochromatisches Farbschema und Mikrointeraktionen auszeichnet. Es enthält eine Unterstützung für den Dunkelmodus mit Hover-Effekten für ansprechende Animationen.

Offen

Komponente der Navigationsleiste

Eine reaktionsschnelle Navigationsleiste mit ansprechenden Mikrointeraktionen, die für den E-Commerce entwickelt wurde, mit einem dunklen Thema und Erdtönen.

Offen