CCHub Logo CCHub Tailwind Collection
Komponenten Seitenleiste Einfache, lebendige Blog-Seitenleiste

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.

Vorschau

HTML-Code 

<!-- Sidebar Component -->
<div class="hidden lg:block w-64 bg-purple-600 text-white dark:bg-purple-800 dark:text-yellow-200 h-screen fixed top-0 left-0 p-5 space-y-6">
    <!-- Sidebar Header -->
    <div class="flex items-center space-x-3">
        <svg class="w-8 h-8 text-yellow-300 dark:text-yellow-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9m2 10V7a2 2 0 00-2-2h-1C9 4 7 2 5 2c-2 0-3 1.5-3 3v15a1 1 0 001 1h16z"></path></svg>
        <span class="text-2xl font-semibold text-yellow-300 dark:text-yellow-100">Blog Name</span>
    </div>

    <!-- Navigation -->
    <nav class="space-y-2">
        <a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
            Home
        </a>
        <a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
            Categories
        </a>
        <a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
            Popular
        </a>
        <a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
            About
        </a>
    </nav>

    <!-- User Profile (Optional) - Position at bottom -->
    <div class="absolute bottom-5 left-5 right-5">
         <div class="flex items-center space-x-3 p-3 bg-purple-700 dark:bg-purple-900 rounded">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/thumb/women/44.jpg" alt="User Avatar">
            <div class="flex flex-col">
                <span class="font-semibold text-yellow-200 dark:text-yellow-100 text-sm">Jane Doe</span>
                <span class="text-xs text-purple-200 dark:text-purple-300">View Profile</span>
            </div>
        </div>
    </div>
</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 reaktionsschnelle Sidebar-Komponente zur Präsentation von Portfolioelementen mit ansprechenden Mikrointeraktionen und einem komplementären Farbschema, das den Dunkelmodus unterstützt.

Offen

Sidebar-Komponente

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

Offen