<section class="rounded-[32px] border border-slate-200 bg-white p-6 shadow-sm">
  <div class="grid gap-4 lg:grid-cols-3">
    <article class="rounded-[28px] border border-slate-200 bg-slate-50 p-5">
      <p class="text-sm font-semibold text-slate-900">Starter</p>
      <p class="mt-4 text-4xl font-semibold text-slate-950">$19</p>
      <p class="mt-2 text-sm text-slate-600">For early products and single operators.</p>
      <ul class="mt-5 space-y-2 text-sm text-slate-600">
        <li>Unlimited blocks</li>
        <li>Email support</li>
        <li>Basic exports</li>
      </ul>
    </article>
    <article class="relative rounded-[28px] border border-slate-900 bg-slate-950 p-5 text-white shadow-xl shadow-slate-950/15">
      <span class="absolute right-5 top-5 rounded-full bg-white px-3 py-1 text-xs font-semibold text-slate-950">Popular</span>
      <p class="text-sm font-semibold text-slate-200">Growth</p>
      <p class="mt-4 text-4xl font-semibold">$49</p>
      <p class="mt-2 text-sm text-slate-300">For teams shipping every week.</p>
      <ul class="mt-5 space-y-2 text-sm text-slate-300">
        <li>Shared libraries</li>
        <li>Advanced exports</li>
        <li>Priority support</li>
      </ul>
    </article>
    <article class="rounded-[28px] border border-slate-200 bg-white p-5">
      <p class="text-sm font-semibold text-slate-900">Scale</p>
      <p class="mt-4 text-4xl font-semibold text-slate-950">$129</p>
      <p class="mt-2 text-sm text-slate-600">For larger teams and multi-brand systems.</p>
      <ul class="mt-5 space-y-2 text-sm text-slate-600">
        <li>Unlimited seats</li>
        <li>Approval flows</li>
        <li>Dedicated onboarding</li>
      </ul>
    </article>
  </div>
</section>