Компоненты Навигация на боковой панели Компонент навигации на боковой панели

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

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

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

HTML-код

<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 h-screen sticky top-0">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Navigation</h2>
    <ul class="space-y-4">
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Home</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">About</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Blog</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Contact</span>
            </a>
        </li>
    </ul>
</div>

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

Навигация по боковой панели Glassmorphism

Адаптивный компонент навигации по боковой панели для портфолио в стиле Glassmorphism, с поддержкой темного режима и аналогичной цветовой схемой. Имеет эффекты матового стекла и множество интерактивных элементов, используя только HTML и Tailwind CSS.

Открытый

RetroSidebarНавигация

Отзывчивый, простой ретро/винтажный пастельный компонент навигации на боковой панели для бизнес/корпоративных веб-сайтов с поддержкой темного режима.

Открытый

РетроПастельСоциальные сетиБоковая панель

Простой и отзывчивый компонент навигации на боковой панели с ретро/винтажным дизайном 80-х/90-х годов, пастельными цветами и поддержкой темного режима, разработанный для интерфейсов социальных сетей с использованием Tailwind CSS.

Открытый