CCHub Logo CCHub Tailwind Collection
Komponenten Sticky Navigation Sticky Navigation Komponente - Neumorphismus

Sticky Navigation Komponente - Neumorphismus

Eine reaktionsschnelle Sticky-Navigationskomponente mit Neumorphism-Design, komplementärem Farbschema und Unterstützung für dunkle Themen, die für eine Portfolio-Website geeignet ist. Verwendet Tailwind CSS mit Klassen im Dunkelmodus und enthält subtile Schatten für den Neumorphismus-Effekt.

Vorschau

HTML-Code 

<nav class="sticky top-0 z-10 bg-gray-200 dark:bg-gray-800 p-4 transition-all duration-300 ease-in-out shadow-neumorphism-light dark:shadow-neumorphism-dark">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-gray-800 dark:text-white text-lg font-bold">Your Logo</div>
    <ul class="flex space-x-4">
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Home</a>
      </li>
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">About</a>
      </li>
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Portfolio</a>
      </li>
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<style>
.shadow-neumorphism-light {
  box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}

.dark .shadow-neumorphism-dark {
  box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #545454;
}
</style>

Verwandte Komponenten

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.

Offen

Sticky Navigation-Komponente

Eine reaktionsschnelle, klebrige Navigationskomponente, die nach Material Design-Prinzipien unter Verwendung von Tailwind CSS gestaltet wurde, ein dunkles Design aufweist und zufällige Platzhalterbilder und Avatare enthält.

Offen

Sticky Navigation-Komponente

Eine Sticky-Navigationskomponente, die für den Dunkelmodus mit responsiven Effekten unter Verwendung von Tailwind CSS entwickelt wurde.

Offen