CCHub Logo CCHub Tailwind Collection
Komponenten Seitenleiste Neumorphism-Komponente in der Seitenleiste

Neumorphism-Komponente in der Seitenleiste

Eine reaktionsschnelle Sidebar-Komponente mit Neumorphism-Design, Erdtönen-Farbschema und einfacher Komplexität, geeignet für Blogs oder den Konsum von Inhalten. Enthält Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="flex h-screen bg-gray-200 dark:bg-gray-800">
  <!-- Sidebar -->
  <div class="w-64 bg-gray-300 dark:bg-gray-700 p-6 space-y-6 shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <!-- Logo or Blog Title -->
    <div class="text-2xl font-bold text-gray-800 dark:text-white">My Blog</div>
    
    <!-- Navigation -->
    <nav>
      <a href="#" class="block py-2 px-4 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-400 dark:hover:bg-gray-600 hover:text-gray-800 dark:hover:text-white shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">Home</a>
      <a href="#" class="block py-2 px-4 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-400 dark:hover:bg-gray-600 hover:text-gray-800 dark:hover:text-white shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">About</a>
      <a href="#" class="block py-2 px-4 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-400 dark:hover:bg-gray-600 hover:text-gray-800 dark:hover:text-white shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">Contact</a>
    </nav>

    <!-- Categories or other links -->
    <div class="space-y-2">
      <div class="text-sm font-semibold text-gray-600 dark:text-gray-300">Categories</div>
      <a href="#" class="block py-1 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Technology</a>
      <a href="#" class="block py-1 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Travel</a>
      <a href="#" class="block py-1 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Food</a>
    </div>
  </div>

  <!-- Main Content Area (optional - just for demonstration) -->
  <div class="flex-1 p-6 overflow-y-auto">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">Welcome to the Blog</h1>
    <p class="text-gray-700 dark:text-gray-300">This is the main content area. The sidebar is on the left.</p>
  </div>
</div>

<!-- Add custom CSS for Neumorphism effect -- In a separate CSS file or style tag -->
<style>
.shadow-neumorphic-light {
  box-shadow: 7px 7px 15px #a7acb1, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
  box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #323232;
}
.shadow-neumorphic-inset-light {
  box-shadow: inset 5px 5px 10px #a7acb1, inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-inset-dark {
  box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #323232;
}
</style>

Verwandte Komponenten

Sidebar-Komponente

Eine reaktionsschnelle Sidebar-Komponente zur Präsentation von Portfolioelementen mit ansprechenden Mikrointeraktionen und einem komplementären Farbschema, das den Dunkelmodus unterstützt.

Offen

Einfache, lebendige Blog-Seitenleiste

Eine einfache, reaktionsschnelle Sidebar-Komponente für Blog-Inhalte, die mit leuchtenden Farben und materialähnlichem Gefühl mit Tailwind CSS gestaltet wurde. Enthält Navigationslinks und einen Abschnitt mit einem Benutzerprofil. Unterstützt den Dunkelmodus mit dem Präfix dark: von Tailwind. Auf größeren Bildschirmen fixiert, auf kleineren Bildschirmen ausgeblendet.

Offen

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.

Offen