Урок 04. Домашнее задание: секция с карточками

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

⚡ Кратко

Сверстать секцию «Тарифы»: заголовок, подзаголовок и три карточки в сетке с одинаковыми отступами. Только утилиты отступов и размеров.

Задание

В проекте курса добавьте секцию по описанию:

  • контейнер по центру, ширина не более 72rem, боковые отступы 16px (32px от 768px), вертикальные — 48px;
  • заголовок и подзаголовок с расстоянием 8px между ними;
  • ниже — сетка из трёх карточек с промежутком 24px;
  • внутри карточки: отступ 24px, круглая иконка 40px, заголовок, текст и кнопка внизу;
  • все значения — из шкалы, без квадратных скобок.

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

cd tailwind-course
npm run dev

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

Шаг 1. Контейнер секции

mx-auto max-w-6xl px-4 py-12 md:px-8 — это скелет любой секции лендинга. Дальше всё вкладывается внутрь.

Шаг 2. Заголовочный блок

Заголовок и подзаголовок оберните в div и используйте mt-2 у подзаголовка. Ограничьте его ширину max-w-prose, чтобы строка не тянулась через весь экран.

Шаг 3. Сетка карточек

mt-8 grid gap-6 md:grid-cols-3. На мобильном карточки идут в столбик, от 768px — в три колонки. Подробно про сетку — в уроке 09.

Шаг 4. Внутренности карточки

Карточка: rounded-xl border border-slate-200 bg-white p-6. Иконка: size-10 rounded-full. Между блоками внутри — отступы mt-4, mt-2.

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

  • Ни одного класса с квадратными скобками.
  • На 320px нет горизонтальной прокрутки.
  • Расстояние между карточками одинаковое по горизонтали и вертикали.
  • Боковые поля секции меняются при переходе через 768px.

Ориентир

Тарифы

Три плана: для одного человека, для команды и для компании.

Старт

Для личных проектов.

Команда

До десяти участников.

Компания

Без ограничений и с поддержкой.

<div class="mx-auto max-w-6xl px-4 py-8">
  <h2 class="text-xl font-semibold text-slate-900">Тарифы</h2>
  <p class="mt-2 max-w-prose text-sm text-slate-600">Три плана: для одного человека, для команды и для компании.</p>
  <div class="mt-8 grid gap-6 md:grid-cols-3">
    <div class="rounded-xl border border-slate-200 bg-white p-6">
      <div class="size-10 rounded-full bg-sky-100"></div>
      <h3 class="mt-4 text-sm font-semibold text-slate-900">Старт</h3>
      <p class="mt-2 text-sm text-slate-600">Для личных проектов.</p>
      <button class="mt-4 w-full rounded-md bg-slate-900 px-3 py-2 text-sm text-white">Выбрать</button>
    </div>
    <div class="rounded-xl border border-slate-200 bg-white p-6">
      <div class="size-10 rounded-full bg-emerald-100"></div>
      <h3 class="mt-4 text-sm font-semibold text-slate-900">Команда</h3>
      <p class="mt-2 text-sm text-slate-600">До десяти участников.</p>
      <button class="mt-4 w-full rounded-md bg-slate-900 px-3 py-2 text-sm text-white">Выбрать</button>
    </div>
    <div class="rounded-xl border border-slate-200 bg-white p-6">
      <div class="size-10 rounded-full bg-violet-100"></div>
      <h3 class="mt-4 text-sm font-semibold text-slate-900">Компания</h3>
      <p class="mt-2 text-sm text-slate-600">Без ограничений и с поддержкой.</p>
      <button class="mt-4 w-full rounded-md bg-slate-900 px-3 py-2 text-sm text-white">Выбрать</button>
    </div>
  </div>
</div>