Таблица ценников (Pricing Table)

Секция таблиц с ценами (Pricing Table), предназначенная для понятной презентации тарифов пользователям SaaS платформ и сервисов подписки. Дизайн отображает три разных тарифа, выделяя рекомендуемый (например, Pro).

Предпросмотр и код

Pricing

Лучший тариф для вашего бизнеса

Все тарифы включают 14 дней бесплатной пробной версии. Отменить можно в любое время.

Basic

¥1,980/месяц

Идеально подходит для личных проектов и небольших команд.

1 проект
Базовая поддержка
Хранилище 10 ГБ

Самый популярный

Pro

¥4,980/месяц

Оптимальный тариф для растущих команд и бизнеса.

Неограниченное число проектов
Приоритетная поддержка
Хранилище 100 ГБ
Расширенная аналитика

Enterprise

¥14,800/месяц

Кастомизированное решение для крупных организаций.

Все без ограничений
Выделенная поддержка 24/7
Кастомное хранилище
SLA гарантии

<div class="bg-gray-50 py-16 px-4 sm:px-6 lg:px-8 font-sans">
  <div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="text-center max-w-3xl mx-auto mb-16">
      <h2 class="text-base font-semibold text-blue-600 tracking-wide uppercase">Pricing</h2>
      <p class="mt-2 text-3xl font-extrabold text-gray-900 sm:text-4xl">
        Лучший тариф для вашего бизнеса
      </p>
      <p class="mt-4 text-xl text-gray-500">
        Все тарифы включают 14 дней бесплатной пробной версии. Отменить можно в любое время.
      </p>
    </div>

    <!-- Pricing Cards Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
      
      <!-- Basic Plan -->
      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 hover:shadow-lg transition-shadow duration-300">
        <h3 class="text-xl font-semibold text-gray-900 mb-4">Basic</h3>
        <div class="flex items-baseline mb-6">
          <span class="text-4xl font-extrabold text-gray-900">¥1,980</span>
          <span class="text-gray-500 ml-2">/месяц</span>
        </div>
        <p class="text-gray-500 mb-8">Идеально подходит для личных проектов и небольших команд.</p>
        <ul class="space-y-4 mb-8">
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            1 проект
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            Базовая поддержка
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            Хранилище 10 ГБ
          </li>
        </ul>
        <button class="w-full py-3 px-4 bg-white text-blue-600 font-medium rounded-xl border-2 border-blue-600 hover:bg-blue-50 transition-colors duration-200">
          Начать
        </button>
      </div>

      <!-- Pro Plan (Highlighted) -->
      <div class="bg-blue-600 rounded-2xl shadow-xl border border-blue-600 p-8 transform md:-translate-y-4 relative">
        <div class="absolute top-0 right-0 -mt-4 mr-4 bg-yellow-400 text-yellow-900 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide">
          Самый популярный
        </div>
        <h3 class="text-xl font-semibold text-white mb-4">Pro</h3>
        <div class="flex items-baseline mb-6">
          <span class="text-4xl font-extrabold text-white">¥4,980</span>
          <span class="text-blue-200 ml-2">/месяц</span>
        </div>
        <p class="text-blue-100 mb-8">Оптимальный тариф для растущих команд и бизнеса.</p>
        <ul class="space-y-4 mb-8">
          <li class="flex items-center text-blue-100">
            <svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            Неограниченное число проектов
          </li>
          <li class="flex items-center text-blue-100">
            <svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            Приоритетная поддержка
          </li>
          <li class="flex items-center text-blue-100">
            <svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            Хранилище 100 ГБ
          </li>
          <li class="flex items-center text-blue-100">
            <svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            Расширенная аналитика
          </li>
        </ul>
        <button class="w-full py-3 px-4 bg-white text-blue-600 font-bold rounded-xl hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200">
          Начать бесплатный период
        </button>
      </div>

      <!-- Enterprise Plan -->
      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 hover:shadow-lg transition-shadow duration-300">
        <h3 class="text-xl font-semibold text-gray-900 mb-4">Enterprise</h3>
        <div class="flex items-baseline mb-6">
          <span class="text-4xl font-extrabold text-gray-900">¥14,800</span>
          <span class="text-gray-500 ml-2">/месяц</span>
        </div>
        <p class="text-gray-500 mb-8">Кастомизированное решение для крупных организаций.</p>
        <ul class="space-y-4 mb-8">
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            Все без ограничений
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            Выделенная поддержка 24/7
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            Кастомное хранилище
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            SLA гарантии
          </li>
        </ul>
        <button class="w-full py-3 px-4 bg-white text-gray-900 font-medium rounded-xl border-2 border-gray-200 hover:border-gray-300 hover:bg-gray-50 transition-colors duration-200">
          Связаться с нами
        </button>
      </div>

    </div>
  </div>
</div>

Особенности реализации

Визуальное выделение: Карточка тарифа Pro (самый популярный) привлекает внимание пользователей за счет цвета фона и эффекта легкого выдвижения вперед (transform md:-translate-y-4).
Адаптивность: Использование grid-cols-1 md:grid-cols-3 обеспечивает идеальное расположение: в одну колонку на мобильных устройствах и в три колонки на экранах размером с планшет и больше.
Эффекты при наведении (Hover): К каждой карточке добавлены классы вроде hover:shadow-lg transition-shadow duration-300, добавляющие интерактивность и обогащающие пользовательский опыт.
Доступность: Цветовая схема выбрана с учетом коэффициента контрастности, а комбинация иконок и текста помогает визуально легко считывать информацию.