CCHub Logo CCHub Tailwind Collection
Komponenten Seitenleiste Sidebar-Komponente

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.

Vorschau

HTML-Code 

<div class="flex bg-gray-200 dark:bg-gray-800 h-screen">
    <div class="w-64 h-full shadow-lg rounded-xl bg-gray-300 dark:bg-gray-700 p-4">
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-sm"/>
            <h2 class="ml-3 text-xl font-semibold text-gray-800 dark:text-gray-100">User Name</h2>
        </div>
        <nav>
            <ul>
                <li class="my-2">
                    <a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Dashboard</a>
                </li>
                <li class="my-2">
                    <a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Profile</a>
                </li>
                <li class="my-2">
                    <a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Settings</a>
                </li>
                <li class="my-2">
                    <a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Logout</a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="flex-1 p-10 bg-gray-100 dark:bg-gray-900">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Main Content</h1>
        <img src="https://picsum.photos/500/300" alt="Placeholder" class="mt-4 rounded-lg shadow-md"/>
    </div>
</div>

Verwandte Komponenten

Sidebar-Komponente

Eine reaktionsschnelle und minimalistische Sidebar-Komponente für den E-Commerce mit Unterstützung des Dunkelmodus. Es verfügt über ein einfaches Layout mit Produktkategorien und einem Warenkorbsymbol.

Offen

Sidebar-Komponente

Eine reaktionsschnelle Sidebar-Komponente, die im Retro-/Vintage-Stil mit leuchtenden Farben für ein Dashboard-Layout gestaltet ist. Es enthält Unterstützung für den Dunkelmodus.

Offen

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