Tailwind — готовые блоки

НЕ ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Готовые одностраничные шаблоны на Tailwind CSS: скопировали HTML в файл, открыли в браузере — блок уже стилизован. Статья для тех, кто ищет в Google «tailwind карточка по центру», «tailwind css примеры», «tailwind grid карточки», «tailwind форма входа», «tailwind navbar sticky», «tailwind кнопка», «tailwind hero section», «tailwind pricing», «tailwind dark mode».

Под каждым блоком кода — разбор по классам: что делает свойство, зачем оно здесь, типичные ошибки и что поменять для эксперимента. Сначала простые UI-блоки, затем макеты страниц и секции лендинга.

Перед Tailwind полезно один раз пройти HTML + CSS — готовые макеты — там те же задачи на чистом CSS. Тогда классы вроде flex items-center перестанут выглядеть «магией».

Основы Tailwind

С чего начать

Теория по Flex/Grid — отдельная глава. Подключение CSS через CDN — Подключение стилей. Чистые макеты — HTML + CSS — готовые макеты. Анимации — CSS-анимации. В React-проектах Tailwind часто идёт с Next.js — экосистема React.

Загрузка HTML-песочницы…

Вставьте любой пример из статьи в редактор — предпросмотр обновится через пару секунд. В пресетах редактора есть пункт Tailwind с подключённым CDN.

Что здесь есть — быстрый поиск

Ищете в Google	Раздел ниже
tailwind карточка по центру / center div	Карточка по центру экрана
tailwind button / кнопки	Кнопки — основные варианты
tailwind badge / статус	Бейджи и метки статуса
tailwind alert	Алерт — уведомление
tailwind avatar / профиль	Аватар и строка профиля
tailwind header footer layout	Шапка, контент и подвал
tailwind grid cards / сетка	Адаптивная сетка карточек
tailwind sticky navbar	Навигация с липкой шапкой
tailwind login form	Вход по центру
tailwind contact form	Контактная форма
tailwind hero section	Hero — первый экран
tailwind pricing table	Тарифы (pricing)
tailwind dark mode	Тёмная тема
tailwind hover card	Карточка с hover-эффектом

Базовые термины

Термин	Простыми словами
Utility-first	Стили задаются готовыми классами (`p-4`, `text-center`), а не отдельным CSS-файлом
Utility-класс	Одна «мелкая» задача: отступ, цвет, размер шрифта, flex-выравнивание
Префикс breakpoint	`sm:`, `md:`, `lg:` — класс включается от заданной ширины экрана
Spacing scale	Шаг отступов: `1` = 0.25rem (4px), `4` = 1rem (16px), `8` = 2rem
CDN Play	Скрипт `cdn.tailwindcss.com` — Tailwind в браузере без сборки; удобно для учёбы
Build (CLI / Vite)	В реальном проекте Tailwind компилируется и «вырезает» неиспользуемые классы
`@apply`	Сборка нескольких utility в один именованный класс (в `<style>` или CSS-файле)

Как работать с примерами

Скопируйте весь блок кода (от <!DOCTYPE html> до </html>).
Сохраните как tailwind.html (или index.html) и откройте в Chrome / Edge / Firefox.
Меняйте один класс за раз — bg-blue-500 → bg-emerald-500, p-4 → p-8.
Если сломали — верните исходник из статьи.

CDN и продакшен

Скрипт cdn.tailwindcss.com подходит для уроков, домашки и прототипа. В боевом сайте Tailwind подключают через сборку (PostCSS, Vite, Next.js), чтобы контролировать размер CSS и версию. Для учебной работы CDN достаточно.

Сначала основы CSS

Tailwind ускоряет вёрстку, когда вы уже понимаете Flexbox, Grid и блочную модель. Если классы кажутся «магией» — начните с готовых макетов на чистом CSS.

Как читать длинную строку классов

Tailwind пишут в одну строку в атрибуте class. Читайте слева направо: каждый фрагмент через пробел — отдельное правило.

Пример:

<button class="mt-4 w-full rounded-lg bg-indigo-600 px-4 py-2.5 font-semibold text-white hover:bg-indigo-700 transition-colors">

Класс	Эквивалент в CSS (упрощённо)	Смысл
`mt-4`	`margin-top: 1rem`	Отступ сверху от предыдущего элемента
`w-full`	`width: 100%`	Кнопка на всю ширину родителя
`rounded-lg`	`border-radius: 0.5rem`	Скруглённые углы
`bg-indigo-600`	фон `#4f46e5`	Основной цвет кнопки
`px-4`	`padding-left/right: 1rem`	Горизонтальные «подушки» текста
`py-2.5`	`padding-top/bottom: 0.625rem`	Вертикальные «подушки»
`font-semibold`	`font-weight: 600`	Полужирный текст
`text-white`	`color: white`	Белый текст на тёмном фоне
`hover:bg-indigo-700`	при `:hover` фон темнее	Реакция на наведение
`transition-colors`	плавная смена цвета	Кнопка меняет цвет не рывком

Порядок классов не важен — браузер применит все. В команде их часто сортируют «логически» (layout → размер → цвет → hover), но это для людей, не для CSS.

Шкала отступов (spacing)

Число в p-4, mt-2, gap-6 умножается на 0.25rem (4px при стандартном шрифте 16px):

Класс	rem	px (≈)
`1`	0.25	4
`2`	0.5	8
`4`	1	16
`6`	1.5	24
`8`	2	32

mt-2 — margin-top 8px. p-6 — padding 24px со всех сторон.

Breakpoint — когда включается `sm:`, `md:`, `lg:`

Tailwind использует mobile-first: без префикса стиль для телефона, с префиксом — от указанной ширины и шире.

Префикс	Минимальная ширина	Типичное устройство
(нет)	0	телефон
`sm:`	640px	большой телефон, маленький планшет
`md:`	768px	планшет
`lg:`	1024px	ноутбук
`xl:`	1280px	широкий монитор

Пример: grid sm:grid-cols-2 lg:grid-cols-3 — на телефоне одна колонка, от 640px две, от 1024px три.

Цвета — число после названия

slate-500, indigo-600, emerald-100 — одна палитра, разная насыщенность:

Число	Обычно
`50`–`200`	очень светлый фон, бейджи
`500`–`600`	основной цвет кнопок, акцентов
`800`–`900`	тёмный текст на светлом фоне

Пара bg-emerald-100 + text-emerald-800 — светлая «таблетка» статуса с читаемым текстом.

Обязательный каркас

Любой пример ниже собирается на этом фундаменте.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tailwind-блок</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-dvh bg-slate-50 text-slate-800 antialiased">
  <!-- сюда разметка с utility-классами -->
</body>
</html>

Разбор по строкам.

Фрагмент	Смысл
`<!DOCTYPE html>`	Режим HTML5 — страница рисуется предсказуемо
`lang="ru"`	Язык для скринридеров и переносов
`<meta charset="UTF-8">`	Кириллица отображается правильно
`viewport` + `width=device-width`	На телефоне ширина = экран, без «уменьшенного десктопа»
`<script src="https://cdn.tailwindcss.com">`	Подключает Tailwind: сканирует HTML и генерирует CSS
`min-h-dvh` на `body`	Страница минимум на всю высоту окна
`bg-slate-50`	Светло-серый фон «страницы»
`text-slate-800`	Тёмно-серый текст по умолчанию
`antialiased`	Сглаживание шрифтов

Типичные ошибки.

Забыли скрипт CDN — голый HTML без стилей.
Классы написали в <style> без @apply — CDN их не подхватит.
Нет viewport — на телефоне всё мелкое.

Кастомизация (свой цвет бренда):

<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: { brand: '#4361ee' },
      },
    },
  };
</script>

Вставьте после cdn.tailwindcss.com, используйте bg-brand, text-brand.

Стартовые блоки

Простые фрагменты, которые чаще всего ищут в интернете.

Карточка по центру экрана

Задача. Окно входа, сообщение «скоро откроемся», одна карточка ровно по центру экрана — классический запрос «tailwind center div».

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Карточка по центру</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-dvh flex items-center justify-center bg-indigo-50 p-4">
  <article class="w-full max-w-sm rounded-xl bg-white p-6 shadow-lg">
    <h1 class="text-xl font-semibold text-slate-900">Добро пожаловать</h1>
    <p class="mt-2 text-slate-600">Карточка по центру экрана.</p>
    <button
      type="button"
      class="mt-4 w-full rounded-lg bg-indigo-600 px-4 py-2.5 font-semibold text-white hover:bg-indigo-700 transition-colors"
    >
      Продолжить
    </button>
  </article>
</body>
</html>

Разбор — body (центрирование).

Класс	Зачем здесь
`min-h-dvh`	Высота body = высота окна; иначе «центр» будет только вокруг текста
`flex`	Включает Flexbox на body
`items-center`	Вертикальное выравнивание по центру (= `align-items: center`)
`justify-center`	Горизонтальное выравнивание по центру (= `justify-content: center`)
`bg-indigo-50`	Светлый фиолетовый фон страницы — карточка визуально «отделена»
`p-4`	На узком телефоне карточка не прилипает к краям

Разбор — article (карточка).

Класс	Зачем здесь
`w-full max-w-sm`	На телефоне — вся ширина; на ПК — не шире ~384px
`rounded-xl`	Скругление углов — «карточка», а не прямоугольник
`bg-white`	Белая «плашка» на цветном фоне
`p-6`	Внутренние отступы — текст не прижат к краям
`shadow-lg`	Тень — карточка «парит» над фоном

Разбор — текст и кнопка.

Элемент	Классы	Смысл
`h1`	`text-xl font-semibold text-slate-900`	Крупный заголовок, почти чёрный
`p`	`mt-2 text-slate-600`	Отступ сверху 8px, серый подзаголовок
`button`	`mt-4 w-full … hover:bg-indigo-700 transition-colors`	Кнопка на всю ширину, темнеет при наведении

HTML. <article> — самостоятельный блок контента (лучше для семантики, чем голый <div>).

Аналог на чистом CSS — центрированная карточка в 110.md. Там display: grid; place-items: center — тот же эффект, другой синтаксис.

Типичные ошибки.

Ставят h-screen вместо min-h-dvh на телефоне — лишняя прокрутка из‑за адресной строки.
Центрируют через absolute top-1/2 left-1/2 без -translate — блок съезжает.
Забывают p-4 на body — карточка впритык к краям экрана.

Попробуйте сами. Замените items-center на items-start — карточка прижмётся к верху. Уберите shadow-lg — плоский дизайн.

Кнопки — основные варианты

Задача. Набор кнопок для интерфейса: главное действие, второстепенное, контур, удаление, неактивная.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Кнопки Tailwind</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-dvh bg-slate-100 p-8">
  <div class="mx-auto flex max-w-lg flex-wrap gap-3">
    <button type="button" class="rounded-lg bg-indigo-600 px-4 py-2 font-medium text-white hover:bg-indigo-700">
      Primary
    </button>
    <button type="button" class="rounded-lg bg-slate-200 px-4 py-2 font-medium text-slate-800 hover:bg-slate-300">
      Secondary
    </button>
    <button type="button" class="rounded-lg border border-indigo-600 px-4 py-2 font-medium text-indigo-600 hover:bg-indigo-50">
      Outline
    </button>
    <button type="button" class="rounded-lg bg-red-600 px-4 py-2 font-medium text-white hover:bg-red-700">
      Удалить
    </button>
    <button type="button" disabled class="cursor-not-allowed rounded-lg bg-slate-300 px-4 py-2 font-medium text-slate-500">
      Disabled
    </button>
  </div>
</body>
</html>

Разбор — обёртка.

Класс	Смысл
`mx-auto max-w-lg`	Блок кнопок по центру, ширина до ~512px
`flex flex-wrap gap-3`	Кнопки в ряд; на узком экране переносятся; зазор 12px

Разбор — типы кнопок.

Вариант	Ключевые классы	Когда использовать
Primary	`bg-indigo-600 text-white hover:bg-indigo-700`	Главное действие: «Сохранить», «Войти»
Secondary	`bg-slate-200 text-slate-800`	Второстепенное: «Отмена», «Назад»
Outline	`border border-indigo-600 text-indigo-600 hover:bg-indigo-50`	Менее акцентное, но заметное
Danger	`bg-red-600 hover:bg-red-700`	Удаление, необратимые действия
Disabled	`disabled cursor-not-allowed bg-slate-300 text-slate-500`	Действие недоступно

Общий каркас кнопки: rounded-lg px-4 py-2 font-medium — скругление, горизонтальные/вертикальные отступы, начертание.

Типичные ошибки.

Красную кнопку для обычного «ОК» — пользователь пугается.
Нет hover: — интерфейс кажется «мертвым».
disabled без cursor-not-allowed — курсор «рука», хотя нажать нельзя.

Попробуйте сами. Скопируйте классы Primary на все кнопки — исчезнет визуальная иерархия.

Бейджи и метки статуса

Задача. Маленькие «таблетки» статуса: активен, ожидание, ошибка, черновик — в таблицах, карточках, списках задач.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Бейджи</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
  <div class="flex flex-wrap gap-2">
    <span class="rounded-full bg-emerald-100 px-3 py-1 text-sm font-medium text-emerald-800">Активен</span>
    <span class="rounded-full bg-amber-100 px-3 py-1 text-sm font-medium text-amber-800">Ожидание</span>
    <span class="rounded-full bg-red-100 px-3 py-1 text-sm font-medium text-red-800">Ошибка</span>
    <span class="rounded-full bg-slate-200 px-3 py-1 text-sm font-medium text-slate-700">Черновик</span>
  </div>
</body>
</html>

Разбор одного бейджа (на примере «Активен»):

Класс	Смысл
`rounded-full`	Полностью круглые края — форма «таблетки»
`bg-emerald-100`	Очень светлый зелёный фон
`text-emerald-800`	Тёмно-зелёный текст — контраст и читаемость
`px-3 py-1`	Компактные отступы — бейдж не огромный
`text-sm font-medium`	Мелкий, но чёткий текст

Паттерн. Светлый фон *-100 + тёмный текст *-800 одного цвета — стандарт Tailwind для статусов.

Типичные ошибки.

bg-emerald-500 + text-white на мелком бейдже — слишком «кричащий» акцент для таблицы.
Забывают text-sm — бейдж раздувается до размера кнопки.

Попробуйте сами. Замените rounded-full на rounded-md — прямоугольные метки вместо «таблеток».

Алерт — уведомление

Задача. Блок подсказки или предупреждения над формой или в углу страницы.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Алерт</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <div class="mx-auto max-w-md space-y-3">
    <div class="rounded-lg border border-sky-200 bg-sky-50 p-4 text-sky-900" role="status">
      <p class="font-semibold">Подсказка</p>
      <p class="mt-1 text-sm text-sky-800">Файл сохранён в папку «Загрузки».</p>
    </div>
    <div class="rounded-lg border border-amber-200 bg-amber-50 p-4 text-amber-900" role="alert">
      <p class="font-semibold">Внимание</p>
      <p class="mt-1 text-sm">Срок сдачи работы — завтра до 23:59.</p>
    </div>
  </div>
</body>
</html>

Разбор.

Элемент	Классы	Смысл
Обёртка	`space-y-3`	Вертикальный зазор 12px между алертами без margin на каждом
Подсказка	`border-sky-200 bg-sky-50 text-sky-900`	Голубая «спокойная» палитра
Предупреждение	`border-amber-200 bg-amber-50`	Жёлто-янтарная — привлекает внимание
Заголовок	`font-semibold`	Жирная первая строка
Текст	`mt-1 text-sm`	Мелкий абзац под заголовком

Доступность. role="status" — нейтральное сообщение. role="alert" — важное, скринридер может озвучить сразу.

Типичные ошибки. Красный фон для обычной подсказки — пользователь думает, что что-то сломалось.

Аватар и строка профиля

Задача. Строка «фото + имя + email» в шапке, списке чатов, комментариях.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Профиль</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex min-h-dvh items-center justify-center bg-slate-50 p-4">
  <div class="flex items-center gap-3 rounded-xl bg-white p-4 shadow-md">
    <div
      class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-indigo-600 text-lg font-bold text-white"
      aria-hidden="true"
    >
      АИ
    </div>
    <div>
      <p class="font-semibold text-slate-900">Алексей Иванов</p>
      <p class="text-sm text-slate-500">alex@school.ru</p>
    </div>
  </div>
</body>
</html>

Разбор.

Блок	Классы	Смысл
Строка	`flex items-center gap-3`	Аватар и текст в ряд, по вертикали по центру, зазор 12px
Круг	`h-12 w-12 shrink-0 rounded-full`	Фиксированный круг 48×48px; `shrink-0` — не сжимается при длинном имени
Инициалы	`flex items-center justify-center`	Буквы «АИ» ровно по центру круга
Имя	`font-semibold text-slate-900`	Основная строка
Email	`text-sm text-slate-500`	Вторичная, мельче и светлее

Типичные ошибки. Без shrink-0 длинное имя сжимает аватар до овала.

Попробуйте сами. Подставьте <img class="h-12 w-12 shrink-0 rounded-full object-cover" src="…"> вместо div с буквами — тот же layout.

Макеты страницы

Задача. Классическая страница: шапка сверху, текст посередине, подвал внизу окна, даже если текста мало. Запрос «tailwind footer bottom» / «tailwind layout».

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Страница-столбец</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex min-h-dvh flex-col bg-white text-slate-800">
  <header class="bg-slate-900 px-5 py-4 text-slate-100">
    <div class="mx-auto flex max-w-3xl flex-wrap items-center justify-between gap-3">
      <strong>Мой сайт</strong>
      <nav class="flex flex-wrap gap-4 text-sm">
        <a href="#" class="text-sky-300 hover:text-white">Главная</a>
        <a href="#" class="text-sky-300 hover:text-white">О проекте</a>
        <a href="#" class="text-sky-300 hover:text-white">Контакты</a>
      </nav>
    </div>
  </header>
  <main class="mx-auto w-full max-w-3xl flex-1 px-5 py-6">
    <h1 class="text-2xl font-bold">Контент</h1>
    <p class="mt-2 text-slate-600">Мало текста — подвал всё равно внизу.</p>
  </main>
  <footer class="border-t border-slate-200 px-5 py-4 text-center text-sm text-slate-500">
    © 2026
  </footer>
</body>
</html>

Разбор — главная идея.

Блок	Классы	Что происходит
`body`	`flex flex-col min-h-dvh`	Три зоны столбиком на высоту окна
`main`	`flex-1`	Средняя часть растягивается и выталкивает footer вниз
`header` inner	`flex justify-between items-center`	Логотип слева, меню справа
`nav`	`flex flex-wrap gap-4`	Ссылки в ряд, на телефоне переносятся
`main`	`max-w-3xl mx-auto`	Текст не на всю ширину 4K-монитора

Аналог на CSS — шапка и подвал в 110.md.

Типичные ошибки.

position: fixed на footer — перекрывает текст при прокрутке.
Нет min-h-dvh — при коротком тексте подвал «всплывает» вверх.
Нет flex-1 на main — footer идёт сразу под текстом, а не внизу экрана.

Попробуйте сами. Добавьте десять <p> в main — footer уйдёт за нижний край, появится прокрутка (нормально).

Адаптивная сетка карточек

Задача. Каталог, галерея, новости — колонки сами перестраиваются: 1 → 2 → 3. Запрос «tailwind grid responsive».

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Сетка карточек</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-50 p-5">
  <h1 class="text-2xl font-bold text-slate-900">Каталог</h1>
  <div class="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
    <article class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
      <h2 class="font-semibold">Товар A</h2>
      <p class="mt-1 text-sm text-slate-600">Описание.</p>
    </article>
    <article class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
      <h2 class="font-semibold">Товар B</h2>
      <p class="mt-1 text-sm text-slate-600">Описание.</p>
    </article>
    <article class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
      <h2 class="font-semibold">Товар C</h2>
      <p class="mt-1 text-sm text-slate-600">Описание.</p>
    </article>
    <article class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
      <h2 class="font-semibold">Товар D</h2>
      <p class="mt-1 text-sm text-slate-600">Описание.</p>
    </article>
  </div>
</body>
</html>

Разбор — сетка.

Класс	Ширина экрана	Колонок
`grid gap-4`	любая	1 (по умолчанию)
`sm:grid-cols-2`	от 640px	2
`lg:grid-cols-3`	от 1024px	3

gap-4 — 16px между карточками и по вертикали, и по горизонтали. Удобнее, чем margin на каждой карточке.

Разбор — карточка. border border-slate-200 — тонкая рамка; shadow-sm — лёгкая тень; p-4 — внутренний отступ.

Аналог на CSS — адаптивная сетка в 110.md с auto-fit и minmax.

Типичные ошибки.

grid-cols-3 без префикса — на телефоне три узких полоски.
grid-cols-4 «навсегда» — на планшете карточки слишком узкие.

Попробуйте сами. Сузьте окно браузера — колонки перестроятся. Добавьте пятую карточку — сетка пересчитается сама.

Навигация с липкой шапкой

Задача. Меню остаётся сверху при прокрутке длинной статьи. Запрос «tailwind sticky header» / «tailwind navbar».

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sticky navbar</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-slate-800">
  <header class="sticky top-0 z-10 border-b border-slate-200 bg-white/90 backdrop-blur">
    <div class="mx-auto flex max-w-3xl items-center justify-between px-5 py-3">
      <span class="font-bold">Журнал</span>
      <nav class="flex gap-4 text-sm text-slate-600">
        <a href="#" class="hover:text-indigo-600">Статьи</a>
        <a href="#" class="hover:text-indigo-600">О нас</a>
      </nav>
    </div>
  </header>
  <main class="mx-auto max-w-3xl space-y-4 px-5 py-6">
    <h1 class="text-2xl font-bold">Длинная статья</h1>
    <p class="text-slate-600">Прокрутите вниз — шапка останется сверху.</p>
    <p class="text-slate-600">Ещё абзац для проверки прокрутки…</p>
    <p class="text-slate-600">…и ещё один абзац.</p>
    <p class="text-slate-600">…и ещё один абзац.</p>
  </main>
</body>
</html>

Разбор — sticky-шапка.

Класс	Эквивалент / смысл
`sticky top-0`	`position: sticky; top: 0` — при скролле «прилипает» к верху
`z-10`	Рисуется поверх текста, а не под ним
`bg-white/90`	Белый фон с 90% непрозрачности — текст под шапкой слегка просвечивает
`backdrop-blur`	Размытие фона за шапкой — эффект «матового стекла»
`border-b border-slate-200`	Тонкая линия снизу — отделяет от контента

Разбор — контент. space-y-4 — одинаковый зазор 16px между всеми абзацами в main.

Типичные ошибки. fixed вместо sticky без отступа у main — первые строки текста прячутся под шапкой.

Попробуйте сами. Уберите backdrop-blur — шапка станет просто полупрозрачной без размытия.

Формы

Вход по центру

Задача. Страница логина для сайта, LMS, личного кабинета. Запрос «tailwind login form».

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Вход</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex min-h-dvh items-center justify-center bg-indigo-50 p-4">
  <form class="w-full max-w-sm space-y-4 rounded-xl bg-white p-6 shadow-lg">
    <h1 class="text-xl font-semibold text-slate-900">Вход</h1>
    <label class="block">
      <span class="text-sm font-medium text-slate-700">Email</span>
      <input
        type="email"
        required
        placeholder="you@mail.ru"
        class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-200"
      />
    </label>
    <label class="block">
      <span class="text-sm font-medium text-slate-700">Пароль</span>
      <input
        type="password"
        required
        minlength="4"
        class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-200"
      />
    </label>
    <button
      type="submit"
      class="w-full rounded-lg bg-indigo-600 py-2.5 font-semibold text-white hover:bg-indigo-700"
    >
      Войти
    </button>
  </form>
</body>
</html>

Разбор — форма.

Класс	Смысл
`space-y-4` на `<form>`	Между заголовком, полями и кнопкой — зазор 16px
`block` на `<label>`	Label занимает всю ширину — подпись над полем
`mt-1` на `<input>`	4px между подписью «Email» и полем ввода

Разбор — поле ввода.

Класс	Смысл
`w-full`	Поле на всю ширину формы
`border border-slate-300`	Серая рамка в обычном состоянии
`rounded-lg px-3 py-2`	Скругление и внутренние отступы
`focus:outline-none`	Убирает стандартный синий контур браузера
`focus:ring-2 focus:ring-indigo-200`	Своё «кольцо» фокуса — видно при Tab с клавиатуры
`focus:border-indigo-500`	Рамка синеет при фокусе

HTML. required, type="email", minlength="4" — базовая проверка браузером без JavaScript.

Типичные ошибки. Нет focus:ring — при навигации Tab не видно, какое поле активно.

Попробуйте сами. Уберите space-y-4 и добавьте mb-4 на каждый label — тот же результат, но больше классов.

Контактная форма в две колонки

Задача. Имя и email в один ряд на широком экране, столбиком на телефоне.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Контакты</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-50 p-6">
  <form class="mx-auto max-w-xl space-y-4 rounded-xl bg-white p-6 shadow-md">
    <h1 class="text-xl font-semibold">Напишите нам</h1>
    <div class="grid gap-4 md:grid-cols-2">
      <label class="block">
        <span class="text-sm font-medium">Имя</span>
        <input type="text" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2" />
      </label>
      <label class="block">
        <span class="text-sm font-medium">Email</span>
        <input type="email" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2" />
      </label>
    </div>
    <label class="block">
      <span class="text-sm font-medium">Сообщение</span>
      <textarea rows="4" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2"></textarea>
    </label>
    <button type="submit" class="rounded-lg bg-emerald-600 px-5 py-2.5 font-semibold text-white hover:bg-emerald-700">
      Отправить
    </button>
  </form>
</body>
</html>

Разбор.

Блок	Классы	Смысл
Обёртка полей	`grid gap-4 md:grid-cols-2`	До 768px — столбик; от 768px — «Имя» и «Email» в два столбца
Textarea	`rows="4"` + те же классы, что у input	Многострочное поле в том же стиле
Кнопка	`px-5` вместо `w-full`	Кнопка по ширине текста, не на всю форму

Попробуйте сами. Замените md:grid-cols-2 на sm:grid-cols-2 — две колонки включатся раньше (от 640px).

Секции лендинга

Блоки для одностраничного сайта: курс, клуб, стартап, портфолио.

Hero — первый экран

Задача. Первый экран лендинга: заголовок, подзаголовок, две кнопки. Запрос «tailwind hero section».

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hero</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 text-white">
  <section class="mx-auto flex min-h-dvh max-w-5xl flex-col items-center justify-center px-6 py-16 text-center">
    <p class="rounded-full bg-indigo-500/20 px-4 py-1 text-sm font-medium text-indigo-200">Новый курс</p>
    <h1 class="mt-4 text-4xl font-bold tracking-tight sm:text-5xl">
      Веб-разработка с нуля
    </h1>
    <p class="mt-4 max-w-xl text-lg text-slate-300">
      HTML, CSS, JavaScript и первый деплой — за один семестр.
    </p>
    <div class="mt-8 flex flex-wrap justify-center gap-3">
      <a href="#" class="rounded-lg bg-indigo-500 px-6 py-3 font-semibold hover:bg-indigo-400">
        Записаться
      </a>
      <a href="#" class="rounded-lg border border-slate-600 px-6 py-3 font-semibold text-slate-200 hover:bg-slate-800">
        Программа
      </a>
    </div>
  </section>
</body>
</html>

Разбор.

Элемент	Классы	Смысл
`section`	`min-h-dvh flex flex-col items-center justify-center`	Блок на весь экран, контент по центру
Бейдж «Новый курс»	`rounded-full bg-indigo-500/20`	«Таблетка»; `/20` = 20% непрозрачности фона
`h1`	`text-4xl sm:text-5xl tracking-tight`	Крупный заголовок; на широком экране ещё крупнее; буквы чуть плотнее
Подзаголовок	`max-w-xl text-lg text-slate-300`	Не растягивается на всю ширину — удобно читать
Кнопки	`flex flex-wrap justify-center gap-3`	В ряд по центру; на узком экране переносятся

Типичные ошибки. Белый текст на bg-slate-700 без контраста — плохо читается. Здесь фон slate-900 — достаточный контраст.

Три преимущества (feature grid)

Задача. Блок «Почему мы» с тремя карточками.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Features</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white p-8">
  <section class="mx-auto max-w-5xl">
    <h2 class="text-center text-2xl font-bold text-slate-900">Почему мы</h2>
    <div class="mt-8 grid gap-6 md:grid-cols-3">
      <div class="rounded-xl border border-slate-200 p-6">
        <div class="text-2xl" aria-hidden="true">⚡</div>
        <h3 class="mt-3 font-semibold">Быстрый старт</h3>
        <p class="mt-2 text-sm text-slate-600">Первый работающий сайт уже на второй неделе.</p>
      </div>
      <div class="rounded-xl border border-slate-200 p-6">
        <div class="text-2xl" aria-hidden="true">📚</div>
        <h3 class="mt-3 font-semibold">Практика</h3>
        <p class="mt-2 text-sm text-slate-600">Задачи из реальных проектов, а не абстрактные примеры.</p>
      </div>
      <div class="rounded-xl border border-slate-200 p-6">
        <div class="text-2xl" aria-hidden="true">🎯</div>
        <h3 class="mt-3 font-semibold">Поддержка</h3>
        <p class="mt-2 text-sm text-slate-600">Разбор домашних работ и ответы в чате группы.</p>
      </div>
    </div>
  </section>
</body>
</html>

Разбор. md:grid-cols-3 — три равные колонки от 768px. mt-8 под заголовком секции — «воздух» между title и карточками. aria-hidden="true" на emoji — декор, скринридер не озвучивает.

Попробуйте сами. Замените emoji на <img class="h-10 w-10"> — структура та же.

Тарифы (pricing)

Задача. Два тарифа рядом, один выделен как «Популярный».

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pricing</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-50 p-8">
  <section class="mx-auto max-w-4xl">
    <h2 class="text-center text-2xl font-bold">Тарифы</h2>
    <div class="mt-8 grid gap-6 md:grid-cols-2">
      <article class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
        <h3 class="text-lg font-semibold">Базовый</h3>
        <p class="mt-2 text-3xl font-bold">0 ₽</p>
        <ul class="mt-4 space-y-2 text-sm text-slate-600">
          <li>• Доступ к материалам</li>
          <li>• Тесты без проверки</li>
        </ul>
        <button type="button" class="mt-6 w-full rounded-lg border border-indigo-600 py-2 font-medium text-indigo-600 hover:bg-indigo-50">
          Начать
        </button>
      </article>
      <article class="rounded-2xl border-2 border-indigo-600 bg-white p-6 shadow-md">
        <p class="text-xs font-semibold uppercase tracking-wide text-indigo-600">Популярный</p>
        <h3 class="mt-1 text-lg font-semibold">Pro</h3>
        <p class="mt-2 text-3xl font-bold">990 ₽<span class="text-base font-normal text-slate-500">/мес</span></p>
        <ul class="mt-4 space-y-2 text-sm text-slate-600">
          <li>• Все материалы и проекты</li>
          <li>• Проверка домашних работ</li>
          <li>• Сертификат</li>
        </ul>
        <button type="button" class="mt-6 w-full rounded-lg bg-indigo-600 py-2 font-medium text-white hover:bg-indigo-700">
          Оформить
        </button>
      </article>
    </div>
  </section>
</body>
</html>

Разбор — выделение Pro.

Приём	Классы	Эффект
Рамка	`border-2 border-indigo-600` vs `border`	Pro визуально «толще»
Тень	`shadow-md` vs `shadow-sm`	Pro чуть выше над фоном
Метка	`uppercase tracking-wide text-xs`	«ПОПУЛЯРНЫЙ» мелкими caps
Кнопка	filled vs outline	Pro — главное действие

space-y-2 на <ul> — отступ между <li> без margin на каждом пункте.

Статистика в одну строку

Задача. Цифры доверия: ученики, уроки, рейтинг.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Stats</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-indigo-600 p-8 text-white">
  <div class="mx-auto grid max-w-4xl gap-6 text-center sm:grid-cols-3">
    <div>
      <p class="text-3xl font-bold">1200+</p>
      <p class="mt-1 text-indigo-100">учеников</p>
    </div>
    <div>
      <p class="text-3xl font-bold">48</p>
      <p class="mt-1 text-indigo-100">уроков</p>
    </div>
    <div>
      <p class="text-3xl font-bold">4.9</p>
      <p class="mt-1 text-indigo-100">средняя оценка</p>
    </div>
  </div>
</body>
</html>

Разбор. text-center — цифра и подпись по центру колонки. text-indigo-100 на подписи — светлее белого, вторичный текст на цветном фоне. sm:grid-cols-3 — на телефоне столбик, от 640px три колонки в ряд.

Отзыв (testimonial)

Задача. Цитата ученика с аватаром — блок доверия на лендинге.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Отзыв</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex min-h-dvh items-center justify-center bg-slate-100 p-6">
  <blockquote class="max-w-lg rounded-2xl bg-white p-8 shadow-lg">
    <p class="text-lg text-slate-700">
      «За месяц собрал первый лендинг и сдал его на зачёт. Классы Tailwind быстро запоминаются, когда понимаешь Flex и Grid.»
    </p>
    <footer class="mt-4 flex items-center gap-3">
      <div class="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-600 text-sm font-bold text-white" aria-hidden="true">
        МК
      </div>
      <cite class="not-italic">
        <span class="font-semibold text-slate-900">Мария К.</span>
        <span class="block text-sm text-slate-500">10 класс</span>
      </cite>
    </footer>
  </blockquote>
</body>
</html>

Разбор. <blockquote> — семантика цитаты. cite с not-italic — имя автора без курсива по умолчанию. block на второй <span> — «10 класс» с новой строки под именем.

Интерактив и тёмная тема

Карточка с hover-эффектом

Задача. Карточка проекта в портфолио — реагирует на наведение: приподнимается, меняет тень и цвет заголовка.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hover card</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex min-h-dvh items-center justify-center bg-slate-50 p-6">
  <article class="group w-full max-w-xs cursor-pointer rounded-xl border border-slate-200 bg-white p-5 shadow-sm transition hover:-translate-y-1 hover:shadow-lg">
    <div class="h-32 rounded-lg bg-gradient-to-br from-indigo-400 to-purple-500 transition group-hover:from-indigo-500 group-hover:to-purple-600"></div>
    <h2 class="mt-4 font-semibold text-slate-900 group-hover:text-indigo-600">Проект «Портфолио»</h2>
    <p class="mt-1 text-sm text-slate-600">Наведите — карточка приподнимается.</p>
  </article>
</body>
</html>

Разбор — паттерн group.

Класс	Где	Смысл
`group`	на `<article>`	Помечает «группу» для hover-дочерних
`hover:-translate-y-1`	на `<article>`	При наведении карточка сдвигается на 4px вверх
`hover:shadow-lg`	на `<article>`	Тень усиливается
`transition`	на article и div	Изменения плавные, не рывком
`group-hover:text-indigo-600`	на `<h2>`	Заголовок синееет, когда курсор где угодно на карточке
`group-hover:from-indigo-500`	на div с градиентом	Градиент темнеет вместе с hover карточки

Почему group. Без него пришлось бы вешать hover: только на каждый элемент отдельно — заголовок не менялся бы при наведении на картинку.

Типичные ошибки. hover:scale-110 на большой карточке — соседние элементы «прыгают». Лучше небольшой -translate-y-1.

Тёмная тема через класс `dark`

Задача. Переключатель светлой и тёмной темы. Запрос «tailwind dark mode».

<!DOCTYPE html>
<html lang="ru" class="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dark mode</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = { darkMode: 'class' };
  </script>
</head>
<body class="min-h-dvh bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100">
  <main class="mx-auto max-w-md p-8">
    <h1 class="text-2xl font-bold">Тёмная тема</h1>
    <p class="mt-2 text-slate-600 dark:text-slate-400">
      Класс <code class="rounded bg-slate-200 px-1 dark:bg-slate-700">dark</code> на <code>&lt;html&gt;</code> включает варианты <code>dark:</code>.
    </p>
    <button
      type="button"
      onclick="document.documentElement.classList.toggle('dark')"
      class="mt-4 rounded-lg bg-indigo-600 px-4 py-2 font-medium text-white hover:bg-indigo-500"
    >
      Переключить тему
    </button>
  </main>
</body>
</html>

Разбор.

Часть	Смысл
`tailwind.config = { darkMode: 'class' }`	Тёмные стили включаются классом `dark` на предке, а не автоматически по системе
`class="dark"` на `<html>`	Стартовая тёмная тема
`bg-white dark:bg-slate-900`	Светлый фон по умолчанию; при `.dark` — тёмный
`text-slate-600 dark:text-slate-400`	Текст светлеет в тёмной теме
`onclick="…classList.toggle('dark')"`	Кнопка переключает класс на `<html>`

Попробуйте сами. Уберите darkMode: 'class' — префиксы dark: перестанут работать на CDN.

Шаблоны для экспериментов

Фрагменты без полного HTML — вставляйте в <body> готового каркаса.

Универсальная карточка

<article class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
  <h2 class="text-lg font-semibold text-slate-900">Заголовок</h2>
  <p class="mt-2 text-sm text-slate-600">Текст карточки.</p>
  <a href="#" class="mt-4 inline-block text-sm font-medium text-indigo-600 hover:text-indigo-800">
    Подробнее →
  </a>
</article>

Разбор. inline-block на ссылке — кликабельная область только вокруг текста, а не на всю ширину. hover:text-indigo-800 — ссылка темнеет при наведении.

Контейнер страницы

<div class="mx-auto w-full max-w-5xl px-4 sm:px-6 lg:px-8">
  <!-- контент -->
</div>

Класс	Смысл
`mx-auto`	Блок по центру горизонтали
`max-w-5xl`	Не шире ~1024px — удобно читать
`px-4 sm:px-6 lg:px-8`	Боковые отступы растут на больших экранах

Сборка классов через `@apply` (CDN)

Если одна комбинация повторяется десять раз:

<style type="text/tailwindcss">
  @layer components {
    .btn-primary {
      @apply rounded-lg bg-indigo-600 px-4 py-2 font-semibold text-white hover:bg-indigo-700 transition-colors;
    }
  }
</style>
<button type="button" class="btn-primary">Действие</button>

Смысл. @apply «склеивает» utility в один класс .btn-primary. В учебном файле на CDN удобно; в большом проекте чаще повторяют utility в JSX или используют компоненты.

Bento-сетка (разные размеры ячеек)

Задача. Мозаика как в iOS / Windows 11 — ячейки разного размера.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bento grid</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 p-6">
  <div class="mx-auto grid max-w-3xl auto-rows-[8rem] gap-3 sm:grid-cols-2 lg:grid-cols-4">
    <div class="rounded-2xl bg-indigo-500 p-4 text-white lg:col-span-2 lg:row-span-2">Большой</div>
    <div class="rounded-2xl bg-emerald-500 p-4 text-white">A</div>
    <div class="rounded-2xl bg-amber-500 p-4 text-white">B</div>
    <div class="rounded-2xl bg-rose-500 p-4 text-white sm:col-span-2">Широкий</div>
  </div>
</body>
</html>

Разбор.

Класс	Смысл
`auto-rows-[8rem]`	Каждая строка сетки минимум 128px (произвольное значение в `[ ]`)
`lg:grid-cols-4`	На большом экране 4 колонки
`lg:col-span-2 lg:row-span-2`	«Большой» блок занимает 2×2 ячейки
`sm:col-span-2`	«Широкий» — две колонки на среднем экране

Сравнение с чистым CSS

Тот же макет «карточка по центру» без Tailwind — HTML + CSS — готовые макеты. Utility-классы короче по строкам HTML, но длиннее в атрибуте class. Отдельный CSS-файл проще искать по проекту. Для учёбы удобно иметь обе версии под рукой.

Частые вопросы

Tailwind без npm — можно?
Да. Все примеры выше работают через <script src="https://cdn.tailwindcss.com">. Установка через npm нужна для больших проектов и продакшена.

Почему классы не применяются?
Проверьте: (1) подключён CDN, (2) классы в class="...", а не в <style>, (3) нет опечатки (flex vs felx).

Чем Tailwind отличается от Bootstrap?
Bootstrap даёт готовые компоненты (.btn, .card). Tailwind даёт «кирпичики» (px-4, rounded-lg) — вы собираете вид сами. Больше гибкости, длиннее class.

С чего начать на уроке информатики?
Скопируйте каркас → карточку по центру → поменяйте цвета и текст → добавьте форму входа.

Что дальше

Задача	Куда идти
Макеты на чистом CSS	HTML + CSS — готовые макеты
Анимации `@keyframes`	CSS-анимации — готовые эффекты
Flexbox и Grid в теории	Flexbox и CSS Grid
Модалки, табы, карусель + JS	UI-компоненты, Виджеты на JavaScript
Tailwind в React / Next.js	Экосистема React
Официальная документация	tailwindcss.com/docs

См. также

Другие статьи этого же раздела в боковом меню (как на странице "О разделе").

Основы Tailwind​

Что здесь есть — быстрый поиск​

Базовые термины​

Как работать с примерами​

Как читать длинную строку классов​

Шкала отступов (spacing)​

Breakpoint — когда включается sm:, md:, lg:​

Цвета — число после названия​

Обязательный каркас​

Стартовые блоки​

Карточка по центру экрана​

Кнопки — основные варианты​

Бейджи и метки статуса​

Алерт — уведомление​

Аватар и строка профиля​

Макеты страницы​

Шапка, контент и подвал (sticky footer)​

Адаптивная сетка карточек​

Навигация с липкой шапкой​

Формы​

Вход по центру​

Контактная форма в две колонки​

Секции лендинга​

Hero — первый экран​

Три преимущества (feature grid)​

Тарифы (pricing)​

Статистика в одну строку​

Отзыв (testimonial)​

Интерактив и тёмная тема​

Карточка с hover-эффектом​

Тёмная тема через класс dark​

Шаблоны для экспериментов​

Универсальная карточка​

Контейнер страницы​

Сборка классов через @apply (CDN)​

Bento-сетка (разные размеры ячеек)​

Частые вопросы​

Что дальше​

Связанные темы

См. также

📄️Готовые решения

📄️Простой консольный чат на CSharp

📄️HTML + CSS — готовые макеты

📄️Примеры фигур Turtle на Python

📄️Примеры фигур Panda3D на Python

📄️Docker Compose — готовые стеки

📄️Nginx — конфиги под задачу

📄️Dockerfile — 10 типовых образов

📄️Prometheus + Grafana — запросы

📄️Kubernetes YAML — минимальные манифесты

📄️Matplotlib — графики

📄️Pandas — типовые операции

Основы Tailwind

Что здесь есть — быстрый поиск

Базовые термины

Как работать с примерами

Как читать длинную строку классов

Шкала отступов (spacing)

Breakpoint — когда включается `sm:`, `md:`, `lg:`

Цвета — число после названия

Обязательный каркас

Стартовые блоки

Карточка по центру экрана

Кнопки — основные варианты

Бейджи и метки статуса

Алерт — уведомление

Аватар и строка профиля

Макеты страницы

Шапка, контент и подвал (sticky footer)

Адаптивная сетка карточек

Навигация с липкой шапкой

Формы

Вход по центру

Контактная форма в две колонки

Секции лендинга

Hero — первый экран

Три преимущества (feature grid)

Тарифы (pricing)

Статистика в одну строку

Отзыв (testimonial)

Интерактив и тёмная тема

Карточка с hover-эффектом

Тёмная тема через класс `dark`

Шаблоны для экспериментов

Универсальная карточка

Контейнер страницы

Сборка классов через `@apply` (CDN)

Bento-сетка (разные размеры ячеек)

Частые вопросы

Что дальше