Кнопка и карточка

Собираем два базовых компонента, на которых держится почти любой интерфейс.

Кнопка по слоям

Разберём кнопку класс за классом, чтобы понять, за что отвечает каждый:

<button class="inline-flex items-center px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg shadow-sm">
  Сохранить
</button>

inline-flex items-center — содержимое в ряд и по центру по вертикали (пригодится, если добавите иконку);
px-5 py-2.5 — комфортные отступы внутри;
bg-blue-600 + hover:bg-blue-700 — синий фон, темнеющий при наведении;
text-white font-medium — белый, чуть плотный текст;
rounded-lg shadow-sm — скруглённые углы и лёгкая тень.

Итог: аккуратная синяя кнопка с откликом на наведение — её видно как «нажимаемую».

Вторичная кнопка

Тот же скелет, но без заливки — для второстепенных действий:

<button class="px-5 py-2.5 border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium rounded-lg">
  Отмена
</button>

Получится кнопка с рамкой и без фона; при наведении фон чуть подсвечивается серым. Контраст с основной кнопкой подсказывает, какое действие главное.

Карточка

Карточка — это контейнер с фоном, скруглением, тенью и внутренним отступом:

<div class="max-w-sm bg-white rounded-xl shadow-md overflow-hidden">
  <img class="w-full h-40 object-cover" src="cover.jpg" alt="">
  <div class="p-5">
    <h3 class="text-lg font-semibold text-gray-900">Заголовок</h3>
    <p class="mt-2 text-gray-600">Краткое описание карточки в пару строк.</p>
    <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg">Подробнее</button>
  </div>
</div>

Разбор: max-w-sm ограничивает ширину; overflow-hidden обрезает картинку по скруглённым углам; object-cover заполняет область картинкой без искажений; внутренний блок с p-5 держит отступы текста. Заголовок тёмный и полужирный, описание серее и мельче, кнопка отбита сверху через mt-4.

Почему такой набор

Эти рецепты — не магия, а сумма того, что мы прошли: отступы, цвета, типографика, скругления и тени. Каждый компонент собирается из знакомых утилит, поэтому его легко менять под себя.

Итог

Кнопка = отступы + цвет фона + hover: + текст + скругление + тень.
Вторичная кнопка отличается лишь заменой заливки на рамку — тот же скелет.
Карточка = контейнер с фоном/скруглением/тенью, картинка с object-cover и блок с отступом для текста.