Урок 07. Домашнее задание: уровни поверхности

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

⚡ Кратко

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

Задание

Сделайте страницу-демонстрацию четырёх уровней поверхности:

  • фон страницы — светло-серый;
  • карточка на белом фоне с рамкой;
  • всплывающее меню с тенью shadow-lg;
  • модальное окно с подложкой и тенью shadow-2xl;
  • у всех интерактивных элементов есть видимый фокус.

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

cd tailwind-course
npm run dev

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

Шаг 1. Фон страницы

min-h-svh bg-slate-100 p-8. Светлая подложка нужна, чтобы белые карточки было видно: белое на белом не читается.

Шаг 2. Карточка

rounded-xl border border-slate-200 bg-white p-5. Внутри — заголовок и текст. Никакой тени: это «нижний» уровень.

Шаг 3. Меню

rounded-lg border border-slate-200 bg-white p-1 shadow-lg. Пункты — rounded-md px-3 py-2 hover:bg-slate-100.

Шаг 4. Модальное окно

Подложка bg-slate-900/50 и окно rounded-2xl bg-white p-6 shadow-2xl. Кнопки внизу справа, у каждой — focus-visible:outline-2.

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

  • Четыре уровня видно с первого взгляда, без чтения кода.
  • Радиус вложенных элементов меньше радиуса родителя.
  • Клавиша Tab обходит все кнопки, фокус виден на каждой.
  • Ни у одного блока нет одновременно яркой рамки и крупной тени.

Ориентир

Уровень 1 — карточка

Рамка, без тени.

Уровень 3 — модальное окно

Подложка плюс самая крупная тень.

<div class="space-y-4 rounded-xl bg-slate-100 p-5">
  <div class="rounded-xl border border-slate-200 bg-white p-5">
    <h3 class="text-sm font-semibold text-slate-900">Уровень 1 — карточка</h3>
    <p class="mt-1 text-sm text-slate-600">Рамка, без тени.</p>
  </div>
  <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
                   focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500">Уровень 2 — меню</button>
  </div>
  <div class="relative overflow-hidden rounded-xl">
    <div class="h-28 bg-slate-900/50"></div>
    <div class="absolute inset-x-6 top-4 rounded-2xl bg-white p-4 shadow-2xl">
      <p class="text-sm font-semibold text-slate-900">Уровень 3 — модальное окно</p>
      <p class="mt-1 text-sm text-slate-600">Подложка плюс самая крупная тень.</p>
    </div>
  </div>
</div>