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

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

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

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

HTML-код

<nav class="bg-white dark:bg-gray-800 shadow-md">
  <div class="container mx-auto px-6 py-3">
    <div class="flex items-center justify-between">
      <div class="text-xl font-semibold text-gray-700 dark:text-white">
        <a href="#" class="hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out">My Website</a>
      </div>
      <div class="hidden md:block">
        <div class="flex items-center space-x-4">
          <a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">Home</a>
          <a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">About</a>
          <a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">Services</a>
          <a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">Contact</a>
        </div>
      </div>
      <div class="md:hidden">
        <button class="text-gray-700 dark:text-white focus:outline-none">
          <svg viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6">
            <path fill-rule="evenodd" d="M4 5h16a1 1 0 010 2H4a1 1 0 110-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2z"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

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

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

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

Открытый

Панель навигации по портфолио

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

Открытый

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

Адаптивная панель навигации для веб-сайта электронной коммерции со стилем дизайна glassmorphism с цветовой схемой в оттенках серого и поддержкой темного режима с использованием Tailwind CSS.

Открытый