CCHub Logo CCHub Tailwind Collection
Komponenten Seitenleiste Sidebar-Komponente

Sidebar-Komponente

Eine reaktionsschnelle Sidebar-Komponente, die mit dem Glassmorphism-Effekt und einem komplementären Farbschema entwickelt wurde und sich für einen Blog oder den Konsum von Inhalten eignet.

Vorschau

HTML-Code 

<aside class="bg-white bg-opacity-30 backdrop-blur-lg shadow-md rounded-lg p-4 w-64 dark:bg-gray-800 dark:bg-opacity-30">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">User Name</h2>
    </div>
    <nav>
        <ul class="space-y-2">
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Home</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">About</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Blog</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Contact</a>
            </li>
        </ul>
    </nav>
    <div class="mt-4">
        <h3 class="text-md font-semibold text-gray-800 dark:text-white">Featured Posts</h3>
        <ul class="space-y-2">
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 1</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 2</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 3</a>
            </li>
        </ul>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/300/200" alt="Sample Image" class="rounded-lg shadow-md">
    </div>
</aside>

Verwandte Komponenten

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.

Offen

Sidebar-Komponente

Eine Sidebar-Komponente im Glassmorphism-Stil mit komplementärem Farbschema, die für eine Portfolio-Website mit mittlerer Komplexität entwickelt wurde. Es ist reaktionsschnell und unterstützt den Dunkelmodus mit Tailwind CSS.

Offen

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.

Offen