Freemium Two-Plan

<!-- Free and paid stack to one column below md; the paid card inverts to a dark
     surface so the upgrade reads as the emphasis without relying on hue. -->
<section class="mx-auto w-full max-w-3xl px-4" aria-labelledby="freemium-heading">
  <h2 class="text-center text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100" id="freemium-heading">Start free, upgrade when ready</h2>
  <ul class="mt-8 grid gap-5 md:grid-cols-2 md:items-stretch">
    <li class="flex">
      <article class="flex flex-1 flex-col rounded-2xl border border-gray-200 bg-white p-6 text-gray-900 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100" aria-labelledby="freemium-free">
        <h3 class="text-base font-semibold" id="freemium-free">Free</h3>
        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Get started, no card required.</p>
        <p class="mt-4 flex items-baseline gap-1"><span class="text-3xl font-bold tracking-tight">$0</span><span class="text-sm text-gray-600 dark:text-gray-400">forever</span></p>
        <ul class="my-5 grid flex-1 gap-2.5">
          <li class="flex items-start gap-2 text-sm text-gray-700 dark:text-gray-300"><svg class="mt-0.5 h-4 w-4 flex-none text-blue-600 dark:text-blue-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" /></svg>1 project</li>
          <li class="flex items-start gap-2 text-sm text-gray-700 dark:text-gray-300"><svg class="mt-0.5 h-4 w-4 flex-none text-blue-600 dark:text-blue-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" /></svg>100 monthly events</li>
          <li class="flex items-start gap-2 text-sm text-gray-700 dark:text-gray-300"><svg class="mt-0.5 h-4 w-4 flex-none text-blue-600 dark:text-blue-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" /></svg>Community support</li>
        </ul>
        <a href="#" class="block rounded-lg border border-gray-300 px-4 py-2.5 text-center text-sm font-semibold text-blue-700 transition-colors hover:bg-gray-100 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:border-gray-700 dark:text-blue-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Create free account</a>
      </article>
    </li>
    <li class="flex">
      <article class="flex flex-1 flex-col rounded-2xl bg-gray-900 p-6 text-white dark:bg-gray-800" aria-labelledby="freemium-pro">
        <h3 class="text-base font-semibold" id="freemium-pro">Pro</h3>
        <p class="mt-1 text-sm text-gray-300">Everything in Free, plus room to grow.</p>
        <p class="mt-4 flex items-baseline gap-1"><span class="text-3xl font-bold tracking-tight">$18</span><span class="text-sm text-gray-300">/month</span></p>
        <ul class="my-5 grid flex-1 gap-2.5">
          <li class="flex items-start gap-2 text-sm text-gray-200"><svg class="mt-0.5 h-4 w-4 flex-none text-blue-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" /></svg>Unlimited projects</li>
          <li class="flex items-start gap-2 text-sm text-gray-200"><svg class="mt-0.5 h-4 w-4 flex-none text-blue-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" /></svg>Unlimited events</li>
          <li class="flex items-start gap-2 text-sm text-gray-200"><svg class="mt-0.5 h-4 w-4 flex-none text-blue-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" /></svg>Priority support</li>
          <li class="flex items-start gap-2 text-sm text-gray-200"><svg class="mt-0.5 h-4 w-4 flex-none text-blue-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" /></svg>Custom domains</li>
        </ul>
        <a href="#" class="block rounded-lg bg-white px-4 py-2.5 text-center text-sm font-semibold text-gray-900 transition-colors hover:bg-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900 motion-reduce:transition-none">Upgrade to Pro</a>
      </article>
    </li>
  </ul>
</section>