Генератор таблиц тарифов на CSS

Базовая структура разметки

<section class="pricing">
  <article class="plan">
    <h3>Starter</h3>
    <p class="price">$9 <span>/mo</span></p>
    <p class="tagline">For solo projects.</p>
    <ul class="features">
      <li>3 projects</li>
      <li>10 GB storage</li>
      <li>Community support</li>
    </ul>
    <a class="cta" href="#">Start free</a>
  </article>

  <article class="plan featured">
    <span class="badge">Most popular</span>
    <h3>Pro</h3>
    <p class="price">$29 <span>/mo</span></p>
    <!-- ... -->
  </article>

  <article class="plan">
    <h3>Team</h3>
    <!-- ... -->
  </article>
</section>

Адаптивная сетка из трёх колонок

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.plan {
  padding: 2rem 1.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.plan.featured {
  border: 2px solid #2563eb;
  position: relative;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
}

Связка auto-fit и minmax(240px, 1fr) даёт три колонки на десктопе и одну колонку на мобильных устройствах, и больше ничего настраивать не нужно.

Выделенный тариф

Визуальные приёмы, которые притягивают взгляд:

• Цветная рамка в акцентном цвете бренда.
• Лёгкий подъём карточки за счёт отрицательного margin-top или translateY(-4px).
• Более крупная кнопка CTA, обычно залитая цветом бренда, тогда как у остальных тарифов кнопка контурная.
• Плашка («Самый популярный», «Выгоднее всего») с абсолютным позиционированием вверху карточки.
• Увеличенная высота карточки привлекает внимание, но мешает сравнивать тарифы между собой.

Не используйте все приёмы сразу: выберите два или три. Слишком много сигналов, и визуальная иерархия попросту исчезает.

Переключатель «месяц / год»

<div class="billing-toggle">
  <button data-active="true">Monthly</button>
  <button>Annual · Save 20%</button>
</div>

Обычно переключатель подменяет значения цен небольшим скриптом на JavaScript либо использует состояние :checked у радиокнопки. Показывайте прямо в подписи переключателя процент скидки или сумму экономии в рублях (например, «Экономия 20% при оплате за год»): во многих таблицах это самый убедительный элемент.

Оформление строк с возможностями

.features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.features li.yes::before {
  content: "";
  width: 16px; height: 16px;
  background: url(...check.svg);
}
.features li.no {
  color: #9ca3af;
  text-decoration: line-through;
}

Для пункта «включено» ставьте галочку, для «не включено» используйте серый текст или бледный крестик. Не зачёркивайте текст, не снизив при этом его контраст: жирное зачёркивание читается как акцент, а не как отсутствие возможности.

Держите CTA на виду

По одной кнопке CTA на тариф, визуально одинаковой во всех карточках. Разный текст для разных тарифов («Начать бесплатно», «Перейти на Pro», «Связаться с отделом продаж») вполне допустим и даже помогает вести пользователя по нужному сценарию.

Сделайте таблицу удобной для беглого просмотра

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

1. Название тарифа и цена крупно, в верхней части карточки.
2. Кнопка CTA видна без прокрутки карточки.
3. Список возможностей ниже. Подчёркивайте различия между тарифами, а не повторяйте одни и те же пункты в каждой колонке.

Чек-лист доступности

• Каждый тариф представляет собой отдельный элемент <article> со своим <h3>.
• Плашка «Самый популярный» должна быть видимой текстовой меткой, а не только цветом (ради пользователей с нарушением цветовосприятия).
• У кнопок CTA осмысленный текст («Начать пробный период Pro»), а не «Нажмите здесь».
• У переключателя оплаты есть aria-pressed или семантика радиокнопок.
• Если переключатель сделан на JavaScript, изменение цены объявляется через aria-live="polite".