Навигация на боковой панели
Отзывчивый компонент навигации по боковой панели с аналоговой цветовой схемой и микровзаимодействиями, включая поддержку темной темы.
HTML-код
<div class="flex h-screen bg-gray-100 dark:bg-gray-800">
<!-- Sidebar -->
<div class="w-64 bg-teal-500 dark:bg-teal-700 text-white flex flex-col">
<div class="p-4 text-center text-2xl font-bold">Dashboard</div>
<nav class="mt-6">
<a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Home</a>
<a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Analytics</a>
<a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Reports</a>
<a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Settings</a>
</nav>
</div>
<!-- Content area -->
<div class="flex-1 p-10 text-gray-800 dark:text-gray-200">
<h1 class="text-3xl font-bold mb-6">Welcome to the Dashboard</h1>
<p>This is the main content area.</p>
</div>
</div>Связанные компоненты
Компонент навигации на боковой панели
Компонент навигации на боковой панели, созданный специально для блогов, с 3D-элементами и яркими цветами. Поддерживает темный режим и является адаптивным, отличается простой версткой, подходящей для потребления контента.
Компонент навигации на боковой панели
Простая, отзывчивая навигация по боковой панели для приложений социальных сетей, оптимизированная для темного режима с аналогичной цветовой схемой. Он включает в себя раздел профиля с аватаром и именем пользователя, а также навигационные ссылки. Дизайн использует Tailwind CSS для стилизации и отзывчивости, включая поддержку темного режима через встроенный префикс Tailwind dark:.
Компонент навигации на боковой панели
Отзывчивый компонент навигации на боковой панели, выполненный в стиле брутализма, идеально подходит для приложений электронной коммерции. Он отличается яркими цветами, высокой контрастностью и множеством интерактивных элементов, включая ссылки на различные категории покупок, варианты учетных записей пользователей и яркую кнопку призыва к действию для доступа к корзине. Дизайн также адаптируется к темному режиму.