Компоненты Панель навигации Скевоморфная панель навигации

Скевоморфная панель навигации

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

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

HTML-код

<nav class="bg-white dark:bg-gray-800 shadow-lg p-4 rounded-lg flex items-center justify-between">  <div class="flex items-center space-x-4">    <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full">    <span class="text-xl font-bold text-gray-800 dark:text-white">Portfolio</span>  </div>  <ul class="flex space-x-6">    <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Home</a></li>    <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">About</a></li>    <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Portfolio</a></li>    <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Contact</a></li>  </ul>  <div class="relative">    <button class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200 focus:outline-none">      Menu      <span class="inline-flex items-center justify-center w-3 h-3 bg-gray-800 dark:bg-white rounded-full"></span>    </button>    <ul class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-700 rounded-lg shadow-lg hidden" id="dropdown-menu">      <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Profile</a></li>      <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Settings</a></li>      <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Logout</a></li>    </ul>  </div>  <button class="hidden md:block text-gray-800 dark:text-white border border-gray-400 dark:border-gray-600 rounded-lg px-4 py-2 hover:bg-pink-500 dark:hover:bg-pink-400 transition ease-in-out duration-200">Get Started</button></nav>

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

Панель навигации по блогам

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

Открытый

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

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

Открытый

Скевоморфная панель навигации

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

Открытый