Annual Discount Pricing

<!-- Static annual pricing: the crossed-out monthly price uses <s> (real
     strikethrough semantics), and the discount is stated in words ("Save 20%")
     rather than signalled by colour alone. -->
<section class="mx-auto w-full max-w-3xl px-4" aria-labelledby="annual-discount-heading">
  <div class="text-center">
    <h2 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100" id="annual-discount-heading">Save with annual billing</h2>
    <p class="mt-2 inline-flex rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-800 dark:bg-green-900/40 dark:text-green-300">Two months free every year</p>
  </div>
  <ul class="mt-8 grid gap-5 sm:grid-cols-2 sm:items-stretch">
    <li class="flex">
      <article class="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="annual-solo">
        <div class="flex items-center justify-between gap-2">
          <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100" id="annual-solo">Solo</h3>
          <span class="rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800 dark:bg-green-900/40 dark:text-green-300">Save 20%</span>
        </div>
        <p class="mt-4 flex items-baseline gap-2">
          <span class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100">$8</span>
          <span class="text-sm text-gray-600 dark:text-gray-400">/mo</span>
          <s class="text-sm text-gray-400 dark:text-gray-500">$10</s>
        </p>
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Billed $96 yearly</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 seat</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>20 GB storage</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>Standard 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">Get started<span class="sr-only"> with Solo</span></a>
      </article>
    </li>
    <li class="flex">
      <article class="flex flex-1 flex-col rounded-2xl border-2 border-blue-600 bg-white p-6 dark:border-blue-500 dark:bg-gray-900" aria-labelledby="annual-team">
        <div class="flex items-center justify-between gap-2">
          <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100" id="annual-team">Team</h3>
          <span class="rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800 dark:bg-green-900/40 dark:text-green-300">Save 20%</span>
        </div>
        <p class="mt-4 flex items-baseline gap-2">
          <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>
          <s class="text-sm text-gray-400 dark:text-gray-500">$25</s>
        </p>
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Billed $240 yearly</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>5 seats</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>500 GB storage</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>Audit log</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 Team</span></a>
      </article>
    </li>
  </ul>
</section>