Highlighted Popular Tier

<!-- The popular tier is cued by BOTH a text badge ("Most popular") and a ring,
     never colour alone; one column on phones, three from lg. -->
<section class="mx-auto w-full max-w-5xl px-4" aria-labelledby="highlight-popular-heading">
  <h2 class="text-center text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100" id="highlight-popular-heading">Plans for every stage</h2>
  <ul class="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 lg:items-stretch">
    <li class="flex">
      <article class="relative flex flex-1 flex-col rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900" aria-labelledby="popular-hobby">
        <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100" id="popular-hobby">Hobby</h3>
        <p class="mt-3 flex items-baseline gap-1"><span class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100">$0</span><span class="text-sm text-gray-600 dark:text-gray-400">/mo</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>Community support</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>1 GB bandwidth</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">Get started<span class="sr-only"> with Hobby</span></a>
      </article>
    </li>
    <li class="flex">
      <article class="relative flex flex-1 flex-col rounded-2xl bg-white p-6 ring-2 ring-blue-600 dark:bg-gray-900 dark:ring-blue-500" aria-labelledby="popular-pro">
        <p class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-blue-600 px-3 py-0.5 text-xs font-semibold text-white">Most popular</p>
        <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100" id="popular-pro">Pro</h3>
        <p class="mt-3 flex items-baseline gap-1"><span class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100">$20</span><span class="text-sm text-gray-600 dark:text-gray-400">/mo</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>Unlimited projects</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>Priority support</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 GB bandwidth</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>Analytics</li>
        </ul>
        <a href="#" class="block rounded-lg bg-blue-600 px-4 py-2.5 text-center 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<span class="sr-only"> with Pro</span></a>
      </article>
    </li>
    <li class="flex">
      <article class="relative flex flex-1 flex-col rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900" aria-labelledby="popular-team">
        <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100" id="popular-team">Team</h3>
        <p class="mt-3 flex items-baseline gap-1"><span class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100">$50</span><span class="text-sm text-gray-600 dark:text-gray-400">/mo</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>Everything in Pro</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>SSO</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>Roles &amp; permissions</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>Audit log</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">Get started<span class="sr-only"> with Team</span></a>
      </article>
    </li>
  </ul>
</section>