Урок 07. Примеры: карточки, меню, фокус

📁 Раздел: Базовые утилиты ⏱️ Время изучения: ~45 мин 🎯 Сложность: Начальная

⚡ Кратко

Шесть примеров: карточка, всплывающее меню, поле ввода с фокусом, вкладка, группа аватаров и «вдавленный» блок.

1. Карточка с шапкой

Скругление задаётся у контейнера, а overflow-hidden заставляет внутренние блоки повторить его форму.

Настройки уведомлений

Шапка отделена рамкой снизу, а не тенью — так блок выглядит собранным.

<div class="max-w-sm overflow-hidden rounded-xl border border-slate-200 bg-white">
  <div class="border-b border-slate-200 bg-slate-50 px-4 py-3">
    <h3 class="text-sm font-semibold text-slate-900">Настройки уведомлений</h3>
  </div>
  <div class="px-4 py-3 text-sm text-slate-600">
    Шапка отделена рамкой снизу, а не тенью — так блок выглядит собранным.
  </div>
</div>

2. Всплывающее меню

<div class="w-56 rounded-lg border border-slate-200 bg-white p-1 shadow-lg">
  <button class="w-full rounded-md px-3 py-2 text-left text-sm text-slate-700 hover:bg-slate-100">Открыть</button>
  <button class="w-full rounded-md px-3 py-2 text-left text-sm text-slate-700 hover:bg-slate-100">Переименовать</button>
  <div class="my-1 h-px bg-slate-200"></div>
  <button class="w-full rounded-md px-3 py-2 text-left text-sm text-rose-600 hover:bg-rose-50">Удалить</button>
</div>

Радиус пунктов (rounded-md) меньше радиуса контейнера (rounded-lg) — это правило вложенных скруглений.

3. Поле ввода с честным фокусом

Нажмите Tab, чтобы попасть в поле с клавиатуры, — и увидите кольцо.

Электронная почта

Рамка меняет цвет, кольцо добавляет заметность.

<div class="max-w-sm space-y-2">
  <label class="block text-sm font-medium text-slate-700" for="demo-email">Электронная почта</label>
  <input id="demo-email" type="email" placeholder="name@example.com"
         class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400
                focus:border-sky-500 focus:ring-2 focus:ring-sky-500/30 focus:outline-none">
  <p class="text-xs text-slate-500">Рамка меняет цвет, кольцо добавляет заметность.</p>
</div>

4. Вкладки на нижней рамке

<div class="border-b border-slate-200">
  <nav class="-mb-px flex gap-6 text-sm">
    <a href="#" class="border-b-2 border-sky-600 px-1 pb-3 font-medium text-sky-700">Обзор</a>
    <a href="#" class="border-b-2 border-transparent px-1 pb-3 text-slate-500 hover:border-slate-300 hover:text-slate-700">Отчёты</a>
    <a href="#" class="border-b-2 border-transparent px-1 pb-3 text-slate-500 hover:border-slate-300 hover:text-slate-700">Настройки</a>
  </nav>
</div>

border-transparent у неактивных вкладок резервирует место под линию: при наведении текст не «прыгает».

5. Группа аватаров

<div class="flex -space-x-2">
  <div class="size-9 rounded-full bg-sky-400 ring-2 ring-white"></div>
  <div class="size-9 rounded-full bg-emerald-400 ring-2 ring-white"></div>
  <div class="size-9 rounded-full bg-amber-400 ring-2 ring-white"></div>
  <div class="flex size-9 items-center justify-center rounded-full bg-slate-200 text-xs font-medium text-slate-600 ring-2 ring-white">+5</div>
</div>

Белое кольцо создаёт зазор между наезжающими кругами. Заметьте: ring не влияет на раскладку, поэтому отрицательный отступ считается по самим кругам.

6. Внутренняя тень

inset-shadow-sm — эффект «вдавленной» области. Подходит для полей поиска и подложек.

<div class="max-w-sm rounded-lg bg-slate-100 p-4 inset-shadow-sm">
  <p class="text-sm text-slate-600">inset-shadow-sm — эффект «вдавленной» области. Подходит для полей поиска и подложек.</p>
</div>