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

Собираем модальное окно поверх затемнения и галерею карточек, которая сама перестраивается под экран.

Модальное окно

Модалка — это два слоя: затемняющая подложка на весь экран и окно по центру поверх неё. Разберём разметку:

<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
  <div class="bg-white rounded-xl shadow-xl max-w-md w-full p-6">
    <h3 class="text-lg font-semibold">Удалить элемент?</h3>
    <p class="mt-2 text-gray-600">Это действие нельзя отменить.</p>
    <div class="mt-6 flex justify-end gap-3">
      <button class="px-4 py-2 text-gray-700">Отмена</button>
      <button class="px-4 py-2 bg-red-600 text-white rounded-lg">Удалить</button>
    </div>
  </div>
</div>

Внешний слой: fixed inset-0 растягивает его на весь экран и фиксирует при прокрутке; z-50 кладёт поверх всего; bg-black/50 даёт полупрозрачное затемнение; flex items-center justify-center центрирует окно. Само окно: белое, со скруглением и крупной тенью (shadow-xl), ограничено по ширине (max-w-md) и занимает её полностью на узких экранах (w-full). Кнопки внизу прижаты вправо через justify-end с зазором.

Показ и скрытие модалки управляются уже на JavaScript (добавлением/удалением блока) — Tailwind отвечает только за вид.

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

Финальный аккорд — галерея, объединяющая всё пройденное: Grid, брейкпоинты и компонент карточки. Одна строка классов задаёт перестроение под экран:

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white rounded-xl shadow p-5">Карточка 1</div>
  <div class="bg-white rounded-xl shadow p-5">Карточка 2</div>
  <div class="bg-white rounded-xl shadow p-5">Карточка 3</div>
  <div class="bg-white rounded-xl shadow p-5">Карточка 4</div>
</div>

Как это выглядит: на телефоне (grid-cols-1) карточки идут одна под другой; на планшете (sm:grid-cols-2) — по две в ряд; на десктопе (lg:grid-cols-3) — по три. Зазор gap-6 держит воздух между ними на всех экранах. Ни одного медиа-запроса вручную — вся адаптивность в классах.

Итог

Модалка — внешний слой fixed inset-0 z-50 bg-black/50 flex items-center justify-center и окно max-w-md w-full по центру.
Видимость модалки переключает JavaScript; Tailwind задаёт только её вид.
Адаптивная галерея — grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-*: 1/2/3 колонки по росту экрана.