Панель навигации приборной панели Glassmorphism
Glassmorphism Монохроматическая сложная панель навигации на панели управления с Tailwind CSS, адаптивной и поддержкой темной темы.
HTML-код
<nav class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="text-white font-bold text-xl">Dashboard</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="text-white hover:text-gray-200">Home</a>
<a href="#" class="text-white hover:text-gray-200">Settings</a>
<a href="#" class="text-white hover:text-gray-200">Reports</a>
<a href="#" class="text-white hover:text-gray-200">Users</a>
</div>
<div class="md:hidden">
<button class="text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path>
</svg>
</button>
</div>
</div>
</nav>Связанные компоненты
Компонент панели навигации 47
Адаптивная панель навигации со стилем 3D-дизайна, включающая глубину и вовлеченность, поддерживающая темную тему.
Градиент/цветовые переходы Панель навигации приборной панели в оттенках серого
Сложная, отзывчивая панель навигации для приборной панели с градиентными переходами в цветовой схеме в оттенках серого. Включает несколько интерактивных элементов и полную поддержку темного режима.
Скевоморфная панель навигации
Простая адаптивная панель навигации для социальных сетей со скевоморфным стилем дизайна, использующая аналогичную цветовую схему и поддерживающая темный режим.