Урок 01. Домашнее задание: карточка профиля

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

⚡ Кратко

Собрать карточку профиля только на утилитах: аватар, имя, должность, две кнопки. Проверить в браузере, что ни одной строки собственного CSS не понадобилось.

Задание

Сверстайте карточку профиля по описанию:

  • белый блок с рамкой, скруглением и мягкой тенью, ширина не больше 24rem;
  • в строку: круглый аватар (48×48) и текстовый блок — имя (полужирное) и должность (мельче, серым);
  • ниже — две кнопки в ряд: основная тёмная и второстепенная с рамкой;
  • у обеих кнопок есть состояние наведения.

Подготовка окружения

Для этого урока сборка не нужна — достаточно одного HTML-файла и браузерной версии Tailwind. Полноценную установку сделаем в уроке 02.

<!-- profile.html -->
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Карточка профиля</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-slate-50 p-8">
  <!-- сюда карточку -->
</body>
</html>
⚠️ Проверить по документации: браузерная сборка @tailwindcss/browser предназначена только для обучения и быстрых проб — она компилирует CSS прямо в браузере и не годится для реальных сайтов. Для проектов используйте установку из урока 02.

Пошаговое решение

Шаг 1. Внешняя коробка

Начните с контейнера: max-w-sm, rounded-xl, border border-slate-200, bg-white, p-5, shadow-sm. Проверьте в браузере: должен появиться пустой белый блок.

Шаг 2. Строка с аватаром

Внутри — div с классами flex items-center gap-3. Аватар: size-12 rounded-full и фон-заглушка bg-slate-200. Текстовый блок кладите вторым элементом строки.

Шаг 3. Текст

Имя — text-sm font-semibold text-slate-900, должность — text-xs text-slate-500. Между ними отступ не нужен: разница в размере и цвете уже создаёт иерархию.

Шаг 4. Кнопки

Контейнер mt-4 flex gap-2. Основная кнопка — bg-slate-900 text-white hover:bg-slate-700, второстепенная — border border-slate-200 text-slate-700 hover:bg-slate-50. Общие для обеих: rounded-md px-3 py-1.5 text-sm font-medium.

Как проверить

  • Откройте файл в браузере: карточка выглядит как на макете, собственного CSS нет.
  • Наведите курсор на кнопки — фон должен меняться.
  • В DevTools выберите карточку и убедитесь, что padding = 20px (это p-5), а border-radius = 12px (rounded-xl).
  • Сузьте окно до 320px: карточка не должна выходить за экран.

Ориентир

Если застряли — вот один из корректных вариантов результата:

Ирина Соколова

Продуктовый аналитик

<div class="max-w-sm rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
  <div class="flex items-center gap-3">
    <div class="size-12 rounded-full bg-slate-200"></div>
    <div>
      <p class="text-sm font-semibold text-slate-900">Ирина Соколова</p>
      <p class="text-xs text-slate-500">Продуктовый аналитик</p>
    </div>
  </div>
  <div class="mt-4 flex gap-2">
    <button class="rounded-md bg-slate-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-slate-700">
      Написать
    </button>
    <button class="rounded-md border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50">
      Профиль
    </button>
  </div>
</div>

Связь с разделами урока: контейнер и отступы — из справочника, состояния кнопок — из примеров, а причины «почему без CSS-файла» — в теории.