Компоненты Боковая панель Компонент боковой панели 27

Компонент боковой панели 27

Компонент боковой панели в стиле ретро/винтаж с отзывчивыми эффектами и поддержкой темных тем.

Предварительный просмотр

HTML-код

<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>

Связанные компоненты

Компонент боковой панели

Компонент боковой панели в стиле Glassmorphism с дополнительной цветовой схемой, разработанный для веб-сайта-портфолио средней сложности. Он адаптивный и поддерживает темный режим с использованием Tailwind CSS.

Открытый

3D_Sidebar_Documentation_Wiki

Сложный, вдохновленный 3D адаптивный компонент боковой панели для документации и вики-сайтов, использующий теплые нейтральные цвета с полной поддержкой темного режима.

Открытый

Боковая панель Glassmorphism с темным режимом

Отзывчивый компонент боковой панели с дизайном glassmorphism и поддержкой темного режима с использованием Tailwind CSS. Он включает в себя логотип, название сайта, навигационные ссылки и раздел профиля пользователя.

Открытый