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

Sidebar-Komponente

Eine Sidebar-Komponente im Glassmorphism-Stil mit komplementärem Farbschema, die für eine Portfolio-Website mit mittlerer Komplexität entwickelt wurde. Es ist reaktionsschnell und unterstützt den Dunkelmodus mit Tailwind CSS.

Offen

3D_Sidebar_Documentation_Wiki

Eine komplexe, 3D-inspirierte, reaktionsschnelle Sidebar-Komponente für Dokumentations- und Wiki-Sites mit warmen Neutraltönen und vollständiger Unterstützung des Dunkelmodus.

Offen

Sidebar-Komponente

Eine reaktionsschnelle Seitenleistenkomponente, die im Neumorphism-Stil unter Verwendung von Tailwind CSS erstellt wurde. Es verfügt über einen weichen UI-Look mit subtilen Schatten, unterstützt den Dunkelmodus und enthält Platzhalterbilder und Avatare.

Offen