Split Checklist Hero

<section class="mx-auto grid w-full max-w-6xl items-center gap-8 px-4 py-12 md:grid-cols-2 md:gap-12 md:px-6 md:py-16">
  <div>
    <p class="text-xs font-bold uppercase tracking-widest text-blue-700 dark:text-blue-400">Migrate in a day</p>
    <h1 class="mt-3 text-3xl font-bold leading-tight tracking-tight text-gray-900 sm:text-4xl dark:text-gray-100">
      Everything you need, nothing you don't
    </h1>
    <p class="mt-4 max-w-lg text-base leading-relaxed text-gray-600 dark:text-gray-400">
      Move your stack over without the month-long project and the change freeze.
    </p>
    <a href="#" class="mt-6 inline-flex items-center justify-center rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
      Get started
    </a>
  </div>

  <!-- The checkmark is decorative (aria-hidden): each row is already,
       semantically, a satisfied item in a list. -->
  <ul class="space-y-3">
    <li class="flex items-start gap-3">
      <span class="mt-0.5 flex h-6 w-6 flex-none items-center justify-center rounded-full bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300" aria-hidden="true">
        <svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 10.7a1 1 0 1 1 1.4-1.4l3.1 3.1 6.8-6.8a1 1 0 0 1 1.4 0z" clip-rule="evenodd" /></svg>
      </span>
      <span class="text-sm leading-relaxed text-gray-700 dark:text-gray-300">No-downtime data import</span>
    </li>
    <li class="flex items-start gap-3">
      <span class="mt-0.5 flex h-6 w-6 flex-none items-center justify-center rounded-full bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300" aria-hidden="true">
        <svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 10.7a1 1 0 1 1 1.4-1.4l3.1 3.1 6.8-6.8a1 1 0 0 1 1.4 0z" clip-rule="evenodd" /></svg>
      </span>
      <span class="text-sm leading-relaxed text-gray-700 dark:text-gray-300">SSO and SCIM on every plan</span>
    </li>
    <li class="flex items-start gap-3">
      <span class="mt-0.5 flex h-6 w-6 flex-none items-center justify-center rounded-full bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300" aria-hidden="true">
        <svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 10.7a1 1 0 1 1 1.4-1.4l3.1 3.1 6.8-6.8a1 1 0 0 1 1.4 0z" clip-rule="evenodd" /></svg>
      </span>
      <span class="text-sm leading-relaxed text-gray-700 dark:text-gray-300">Usage-based pricing, no seats</span>
    </li>
    <li class="flex items-start gap-3">
      <span class="mt-0.5 flex h-6 w-6 flex-none items-center justify-center rounded-full bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300" aria-hidden="true">
        <svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 10.7a1 1 0 1 1 1.4-1.4l3.1 3.1 6.8-6.8a1 1 0 0 1 1.4 0z" clip-rule="evenodd" /></svg>
      </span>
      <span class="text-sm leading-relaxed text-gray-700 dark:text-gray-300">24/7 human support</span>
    </li>
  </ul>
</section>