Навбар и форма

Два компонента, которые есть почти на каждой странице: верхнее меню и форма.

Навбар: логотип слева, меню справа

Каркас навбара — это flex с justify-between, который разводит логотип и меню по краям:

<nav class="flex items-center justify-between px-6 py-4 bg-white shadow-sm">
  <a href="/" class="text-xl font-bold text-blue-600">Logo</a>
  <div class="hidden md:flex gap-6">
    <a href="#" class="text-gray-700 hover:text-blue-600">Главная</a>
    <a href="#" class="text-gray-700 hover:text-blue-600">Цены</a>
    <a href="#" class="text-gray-700 hover:text-blue-600">Контакты</a>
  </div>
  <button class="md:hidden">☰</button>
</nav>

Что здесь происходит: justify-between прижимает логотип влево, меню вправо; items-center выравнивает их по высоте; ссылки лежат в ряд с зазором gap-6 и синеют при наведении. Главное — адаптивность: блок ссылок скрыт на мобильном (hidden md:flex), а вместо него виден бургер (md:hidden), который на десктопе прячется. Так одна разметка обслуживает оба экрана.

Форма: поле с меткой

Аккуратное поле ввода состоит из метки и самого input. Метку делают блочной и отбивают снизу, input — на всю ширину с рамкой и фокус-кольцом:

<div>
  <label class="block mb-1 text-sm font-medium text-gray-700">Email</label>
  <input type="email" placeholder="[email protected]"
    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none">
</div>

В покое — поле с серой рамкой и подсказкой-плейсхолдером. При фокусе рамка синеет и появляется синее кольцо (focus:ring-2), а стандартная обводка убирается. Это даёт явный сигнал «вы пишете сюда».

Собираем форму целиком

Несколько таких полей складывают в столбец с равными зазорами через space-y-*, а снизу — кнопка на всю ширину:

<form class="max-w-sm space-y-4">
  <!-- ... поля ... -->
  <button class="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">
    Войти
  </button>
</form>

Форма ограничена по ширине (max-w-sm), поля идут друг под другом с зазором 16px (space-y-4), а кнопка растянута на всю ширину (w-full) — классический вид формы входа.

Итог

Навбар — flex items-center justify-between; адаптивность через hidden md:flex для меню и md:hidden для бургера.
Поле ввода — w-full + рамка + focus:ring-2 для понятного фокуса; метка через block mb-1.
Форма — поля в space-y-* внутри max-w-*, кнопка на всю ширину.