💳 Тарифы

<div class="grid gap-4 lg:grid-cols-3">
  <div class="flex flex-col rounded-xl border border-slate-200 bg-white p-5 dark:border-slate-700 dark:bg-slate-900">
    <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-50">Старт</h3>
    <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Для личных проектов</p>
    <p class="mt-4 text-3xl font-semibold tabular-nums text-slate-900 dark:text-slate-50">0 ₽</p>
    <ul class="mt-4 space-y-2 text-sm text-slate-600 dark:text-slate-400">
      <li class="flex gap-2"><span class="text-emerald-600">✓</span> До трёх проектов</li>
      <li class="flex gap-2"><span class="text-emerald-600">✓</span> Базовые отчёты</li>
      <li class="flex gap-2"><span class="text-slate-300 dark:text-slate-600">✕</span> Совместная работа</li>
    </ul>
    <button class="mt-6 w-full rounded-md border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700
                   dark:border-slate-600 dark:text-slate-200">Начать</button>
  </div>

  <div class="relative flex flex-col rounded-xl border-2 border-sky-500 bg-white p-5 dark:bg-slate-900">
    <span class="absolute -top-3 left-5 rounded-full bg-sky-600 px-2.5 py-0.5 text-xs font-medium text-white">Популярный</span>
    <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-50">Команда</h3>
    <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">До десяти участников</p>
    <p class="mt-4 text-3xl font-semibold tabular-nums text-slate-900 dark:text-slate-50">990 ₽<span class="text-sm font-normal text-slate-500"> / мес</span></p>
    <ul class="mt-4 space-y-2 text-sm text-slate-600 dark:text-slate-400">
      <li class="flex gap-2"><span class="text-emerald-600">✓</span> Неограниченно проектов</li>
      <li class="flex gap-2"><span class="text-emerald-600">✓</span> Совместная работа</li>
      <li class="flex gap-2"><span class="text-emerald-600">✓</span> Расширенные отчёты</li>
    </ul>
    <button class="mt-6 w-full rounded-md bg-sky-600 px-4 py-2 text-sm font-medium text-white hover:bg-sky-700">Выбрать</button>
  </div>

  <div class="flex flex-col rounded-xl border border-slate-200 bg-white p-5 dark:border-slate-700 dark:bg-slate-900">
    <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-50">Компания</h3>
    <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Без ограничений</p>
    <p class="mt-4 text-3xl font-semibold text-slate-900 dark:text-slate-50">По договору</p>
    <ul class="mt-4 space-y-2 text-sm text-slate-600 dark:text-slate-400">
      <li class="flex gap-2"><span class="text-emerald-600">✓</span> Всё из «Команды»</li>
      <li class="flex gap-2"><span class="text-emerald-600">✓</span> Единый вход (SSO)</li>
      <li class="flex gap-2"><span class="text-emerald-600">✓</span> Выделенная поддержка</li>
    </ul>
    <button class="mt-6 w-full rounded-md border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700
                   dark:border-slate-600 dark:text-slate-200">Связаться</button>
  </div>
</div>

<div class="text-center">
  <div class="inline-flex rounded-lg bg-slate-100 p-1 dark:bg-slate-800">
    <button class="rounded-md bg-white px-4 py-1.5 text-sm font-medium text-slate-900 shadow-sm dark:bg-slate-900 dark:text-slate-50">Помесячно</button>
    <button class="inline-flex items-center gap-2 rounded-md px-4 py-1.5 text-sm font-medium text-slate-600 dark:text-slate-400">
      Годовой
      <span class="rounded-full bg-emerald-500/15 px-2 py-0.5 text-xs text-emerald-700 dark:text-emerald-300">−20%</span>
    </button>
  </div>
</div>