CCHub Logo CCHub Tailwind Collection
Komponenten Seitenleiste Sidebar-Komponente

Sidebar-Komponente

Eine reaktionsschnelle Sidebar-Komponente im Dark-Modus, die mit Tailwind CSS entwickelt wurde und dunkle Hintergründe, Hover-Effekte und Platzhalter für Bilder und Avatare bietet.

Vorschau

HTML-Code 

<div class="flex flex-col h-screen bg-gray-800 text-white p-4">
    <div class="flex items-center mb-6">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
        <h1 class="text-xl font-semibold">User Name</h1>
    </div>
    <nav class="flex-1">
        <ul>
            <li class="mb-4">
                <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
                    <img src="https://picsum.photos/50/50" alt="Home Icon" class="w-6 h-6 mr-2">Home
                </a>
            </li>
            <li class="mb-4">
                <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
                    <img src="https://picsum.photos/50/50" alt="Profile Icon" class="w-6 h-6 mr-2">Profile
                </a>
            </li>
            <li class="mb-4">
                <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
                    <img src="https://picsum.photos/50/50" alt="Settings Icon" class="w-6 h-6 mr-2">Settings
                </a>
            </li>
            <li class="mb-4">
                <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
                    <img src="https://picsum.photos/50/50" alt="Logout Icon" class="w-6 h-6 mr-2">Logout
                </a>
            </li>
        </ul>
    </nav>
    <footer>
        <p class="text-gray-400 text-sm">© 2023 Your Company</p>
    </footer>
</div>

Verwandte Komponenten

Skeuomorphismus-Seitenleiste

Eine reaktionsschnelle Seitenleistenkomponente mit Skeuomorphismus-Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen

Sidebar-Komponente

Eine reaktionsschnelle Sidebar-Komponente, die für E-Commerce-Anwendungen mit Material Design-Elementen und einem pastellfarbenen Farbschema entwickelt wurde, mit Unterstützung für den Dunkelmodus.

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