CCHub Logo CCHub Tailwind Collection
Komponenten Seitenleiste Skeuomorphe Pastell-Seitenleiste

Skeuomorphe Pastell-Seitenleiste

Eine einfache, reaktionsschnelle Sidebar-Komponente mit skeuomorphem Design und Pastellfarben, die sich für einen Blog oder eine Content-Site eignet. Enthält Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="flex flex-col h-screen bg-gray-200 dark:bg-gray-800">
  <div class="flex items-center justify-center h-16 bg-gray-300 dark:bg-gray-700 shadow-md">
    <span class="text-lg font-semibold text-gray-700 dark:text-gray-200">Blog Menu</span>
  </div>
  <nav class="flex-grow p-4">
    <ul class="space-y-2">
      <li>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
          Home
        </a>
      </li>
      <li>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
          About
        </a>
      </li>
      <li>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
          Contact
        </a>
      </li>
    </ul>
  </nav>
</div>

Verwandte Komponenten

Glassmorphism Sidebar mit Dark Mode

Eine reaktionsschnelle Seitenleistenkomponente mit glassmorphism-Design und Unterstützung für den Dunkelmodus mit Tailwind CSS. Es enthält ein Logo, einen Site-Namen, Navigationslinks und einen Benutzerprofilbereich.

Offen

Sidebar-Komponente

Eine komplexe, reaktionsschnelle Seitenleistenkomponente im Glassmorphism-Stil für ein Dashboard mit Unterstützung für Erdtöne und Dunkelmodus.

Offen

Seitenleiste "Neumorphismus"

Eine Seitenleistenkomponente im Neumorphism-Stil mit responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Offen