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

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

Адаптивный компонент боковой панели в темном режиме, разработанный с использованием 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 с дополнительной цветовой схемой, разработанный для веб-сайта-портфолио средней сложности. Он адаптивный и поддерживает темный режим с использованием Tailwind CSS.

Открытый

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

Адаптивный компонент боковой панели с ретро/винтажным дизайном для демонстрации работ или продуктов, использующий цветовую схему в оттенках серого и классы CSS Tailwind, поддерживающий темный режим.

Открытый

Скевоморфная пастельная боковая панель

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

Открытый