Two-path CTA split

Build a two-path call to action with Tailwind CSS: two side-by-side cards offering different next steps. The left card is dark and self-serve — heading, one line of copy, a white button, and a small note about no credit card. The right card is white with a border and sales-led — heading, copy, an outline button, and a line about typical response time. Give each card a small label chip at the top and equal height with flex.

<section class="mx-auto max-w-5xl px-6 py-16">
  <div class="grid gap-4 md:grid-cols-2">
    <div class="flex flex-col rounded-3xl bg-neutral-900 p-8">
      <span class="w-fit rounded-full bg-white/10 px-3 py-1 text-xs font-medium text-white">Self-serve</span>
      <h3 class="mt-5 text-2xl font-semibold text-white">Start building in five minutes</h3>
      <p class="mt-2 flex-1 text-neutral-400">Create a workspace, import your data, and invite the team. No call required.</p>
      <a href="#" class="mt-6 w-fit rounded-xl bg-white px-5 py-3 text-sm font-medium text-neutral-900 hover:bg-neutral-100">Create free workspace</a>
      <p class="mt-3 text-xs text-neutral-500">No credit card. Cancel whenever.</p>
    </div>
    <div class="flex flex-col rounded-3xl border border-neutral-200 bg-white p-8">
      <span class="w-fit rounded-full bg-neutral-100 px-3 py-1 text-xs font-medium text-neutral-600">Enterprise</span>
      <h3 class="mt-5 text-2xl font-semibold text-neutral-900">Need procurement, SSO, or a pilot?</h3>
      <p class="mt-2 flex-1 text-neutral-500">We will scope a rollout, handle security review, and price it per your seat count.</p>
      <a href="#" class="mt-6 w-fit rounded-xl border border-neutral-200 px-5 py-3 text-sm font-medium text-neutral-900 hover:bg-neutral-50">Talk to sales</a>
      <p class="mt-3 text-xs text-neutral-400">Typical first reply: under 4 business hours.</p>
    </div>
  </div>
</section>