Components Sidebar Sidebar Component

Sidebar Component

A responsive dark mode sidebar component designed using Tailwind CSS, featuring dark backgrounds, hover effects, and placeholders for images and avatars.

Preview

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>

Related Components

Healthcare Sidebar Component

A complex, minimalist, and responsive sidebar component for healthcare applications, featuring an analogous color scheme and dark mode support. Includes navigation, user profile, and quick links.

Open

Neon_Glow_Grayscale_Sports_Sidebar

A complex, responsive sidebar component for sports/fitness applications, featuring neon/glow effects within a grayscale color scheme. Includes dark mode support and interactive elements like profile, navigation, teams, and settings.

Open

Skeuomorphic Pastel Sidebar

A simple, responsive sidebar component with Skeuomorphic design and pastel colors, suitable for a blog or content site. Includes dark mode support.

Open