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

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

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

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

HTML-код

<nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-purple-800 dark:via-pink-800 dark:to-red-800 p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-white text-2xl font-bold transform hover:scale-105 transition-transform duration-300">My Portfolio</a>
    <ul class="flex space-x-6">
      <li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
        Home
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
      </a></li>
      <li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
        Work
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
      </a></li>
      <li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
        About
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
      </a></li>
      <li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
        Contact
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
      </a></li>
    </ul>
  </div>
</nav>

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

GamingNavigationComponent

Сложная, адаптивная верхняя панель навигации для игровых сайтов, вдохновленная темами органики/природы с аналогичной цветовой схемой. Имеет логотип, навигационные ссылки, аватар пользователя и кнопки призыва к действию, а также полную поддержку темного режима.

Открытый

Игривый компонент криптонавигации в оттенках серого

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

Открытый

Ретро панель навигации для электронной коммерции

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

Открытый