CCHub Logo CCHub Tailwind Collection
Komponenten Navigations-Komponenten Skeuomorphe Navigation

Skeuomorphe Navigation

Eine einfache, reaktionsschnelle Navigationskomponente mit Skeuomorphem Design, analogem Farbschema, das für Social-Media-Anwendungen geeignet ist, mit Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<nav class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 shadow-lg">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <div class="text-gray-800 dark:text-gray-200 font-bold text-xl">SocialApp</div>
    <div class="flex space-x-4">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
        <div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
          Home
        </div>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
        <div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
          Profile
        </div>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
        <div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
          Messages
        </div>
      </a>
    </div>
  </div>
</nav>

Verwandte Komponenten

Brutalistische soziale Navigation

Eine einfache, brutalistische Navigationskomponente für Social Media mit Komplementärfarben. Beinhaltet Unterstützung für responsives Design und Dunkelmodus.

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

Skeuomorphe Navigationskomponente

Eine Navigationskomponente im skeuomorphen Stil mit einem komplementären Farbschema, das für ein Dashboard mit Datenvisualisierung und Bedienfeldern geeignet ist. Es enthält interaktive Elemente für die Benutzerbindung.

Offen