Компоненты Заголовок Компонент заголовка

Компонент заголовка

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

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

HTML-код

<header class="bg-gray-100 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm transition-colors duration-300">
  <div class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center">
    <div class="flex items-center mb-4 md:mb-0">
      <a href="#" class="text-2xl font-bold text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
        MyBlog
      </a>
    </div>
    <nav class="">
      <ul class="flex flex-wrap justify-center gap-x-6 gap-y-2">
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            Home
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            Articles
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            About
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            Contact
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</header>

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

Компонент заголовка

Адаптивный компонент заголовка для панели мониторинга с микровзаимодействиями и яркими цветами, поддерживающий темную тему.

Открытый

Компонент 3D заголовка

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

Открытый

3D Retro Компонент коллектора для погоды

Сложный компонент заголовка в стиле ретро для приложения с погодой/климатом, с элементами 3D-дизайна, приглушенной цветовой палитрой и полной отзывчивостью с поддержкой темного режима. Он отображает текущую информацию о погоде, местоположении, дате и навигации.

Открытый