Sidebar Component 27

A retro/vintage styled sidebar component featuring responsive effects and dark theme support.

Preview

HTML Code

<div class="bg-gray-100 dark:bg-gray-800 h-screen w-64 shadow-lg p-5">
    <div class="flex items-center mb-6">
        <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white ml-3">Hello, User!</h1>
    </div>
    <ul class="space-y-4">
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=1" alt="Icon">
                <span class="text-gray-800 dark:text-white">Dashboard</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=2" alt="Icon">
                <span class="text-gray-800 dark:text-white">Profile</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=3" alt="Icon">
                <span class="text-gray-800 dark:text-white">Settings</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=4" alt="Icon">
                <span class="text-gray-800 dark:text-white">Messages</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=5" alt="Icon">
                <span class="text-gray-800 dark:text-white">Logout</span>
            </a>
        </li>
    </ul>
</div>

Related Components

Simple Vibrant Blog Sidebar

A simple, responsive sidebar component for blog content, designed with vibrant colors and Material-like feel using Tailwind CSS. Includes navigation links and a user profile section. Supports dark mode using Tailwind's dark: prefix. Fixed on larger screens, hidden on smaller screens.

Open

Sidebar Component

A minimalistic sidebar component with responsive design and dark theme support, utilizing Tailwind CSS.

Open

Sidebar Component

A responsive sidebar component for showcasing portfolio items with engaging microinteractions and a complementary color scheme, supporting dark mode.

Open