Секция таблиц с ценами (Pricing Table), предназначенная для понятной презентации тарифов пользователям SaaS платформ и сервисов подписки. Дизайн отображает три разных тарифа, выделяя рекомендуемый (например, Pro).
Лучший тариф для вашего бизнеса
Все тарифы включают 14 дней бесплатной пробной версии. Отменить можно в любое время.
Идеально подходит для личных проектов и небольших команд.
1 проект
Базовая поддержка
Хранилище 10 ГБ
Самый популярный
Оптимальный тариф для растущих команд и бизнеса.
Неограниченное число проектов
Приоритетная поддержка
Хранилище 100 ГБ
Расширенная аналитика
Кастомизированное решение для крупных организаций.
Все без ограничений
Выделенная поддержка 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:shadow-lg transition-shadow duration-300, добавляющие интерактивность и обогащающие пользовательский опыт.