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 einfache, reaktionsschnelle Sidebar-Komponente mit brutalistischem Design, monochromatischem Farbschema und Unterstützung für den Dunkelmodus.

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

Seitenleiste "Neumorphismus"

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

Offen