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

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

Адаптивный компонент боковой панели в темном режиме, разработанный с использованием Tailwind CSS, с темным фоном, эффектами наведения и заполнителями для изображений и аватаров.

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

HTML-код

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

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

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

Адаптивный компонент боковой панели, разработанный с эффектом стекломорфизма и дополнительной цветовой схемой, подходит для блога или потребления контента.

Открытый

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

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

Открытый

Компонент боковой панели для здравоохранения

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

Открытый