Gradient Pricing Cards

<!-- Gradients are decorative only; the price stays real text on a dark-enough
     gradient to clear AA, and "Most popular" is a text badge plus a ring, not
     colour alone. One column on phones, two at sm, three at lg. -->
<section class="mx-auto w-full max-w-5xl px-4" aria-labelledby="gradient-cards-heading">
  <h2 class="text-center text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100" id="gradient-cards-heading">
    Pick your gradient
  </h2>
  <ul class="mt-8 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 overflow-hidden rounded-2xl bg-gradient-to-br from-slate-700 to-slate-900 p-6 text-white" aria-labelledby="gradient-lite">
        <h3 class="text-base font-semibold" id="gradient-lite">Lite</h3>
        <p class="mt-3 flex items-baseline gap-1"><span class="text-4xl font-bold tracking-tight">$9</span><span class="text-sm text-white/80">/mo</span></p>
        <ul class="my-5 grid flex-1 gap-2.5">
          <li class="flex items-start gap-2 text-sm text-white/90"><svg class="mt-0.5 h-4 w-4 flex-none text-white/90" 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 projects</li>
          <li class="flex items-start gap-2 text-sm text-white/90"><svg class="mt-0.5 h-4 w-4 flex-none text-white/90" 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>2 GB storage</li>
          <li class="flex items-start gap-2 text-sm text-white/90"><svg class="mt-0.5 h-4 w-4 flex-none text-white/90" 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 bg-white/95 px-4 py-2.5 text-center text-sm font-semibold text-gray-900 transition-colors hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-transparent motion-reduce:transition-none">Choose plan<span class="sr-only"> Lite</span></a>
      </article>
    </li>
    <li class="flex">
      <article class="relative flex flex-1 flex-col overflow-hidden rounded-2xl bg-gradient-to-br from-blue-600 to-indigo-700 p-6 text-white ring-2 ring-white/70 ring-offset-2 ring-offset-white dark:ring-offset-gray-950" aria-labelledby="gradient-plus">
        <p class="mb-3 inline-flex w-fit rounded-full bg-white/20 px-2.5 py-0.5 text-xs font-semibold text-white">Most popular</p>
        <h3 class="text-base font-semibold" id="gradient-plus">Plus</h3>
        <p class="mt-3 flex items-baseline gap-1"><span class="text-4xl font-bold tracking-tight">$24</span><span class="text-sm text-white/80">/mo</span></p>
        <ul class="my-5 grid flex-1 gap-2.5">
          <li class="flex items-start gap-2 text-sm text-white/90"><svg class="mt-0.5 h-4 w-4 flex-none text-white/90" 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-white/90"><svg class="mt-0.5 h-4 w-4 flex-none text-white/90" 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 storage</li>
          <li class="flex items-start gap-2 text-sm text-white/90"><svg class="mt-0.5 h-4 w-4 flex-none text-white/90" 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>
        </ul>
        <a href="#" class="block rounded-lg bg-white/95 px-4 py-2.5 text-center text-sm font-semibold text-gray-900 transition-colors hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-transparent motion-reduce:transition-none">Choose plan<span class="sr-only"> Plus</span></a>
      </article>
    </li>
    <li class="flex">
      <article class="relative flex flex-1 flex-col overflow-hidden rounded-2xl bg-gradient-to-br from-violet-600 to-fuchsia-700 p-6 text-white" aria-labelledby="gradient-scale">
        <h3 class="text-base font-semibold" id="gradient-scale">Scale</h3>
        <p class="mt-3 flex items-baseline gap-1"><span class="text-4xl font-bold tracking-tight">$59</span><span class="text-sm text-white/80">/mo</span></p>
        <ul class="my-5 grid flex-1 gap-2.5">
          <li class="flex items-start gap-2 text-sm text-white/90"><svg class="mt-0.5 h-4 w-4 flex-none text-white/90" 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 Plus</li>
          <li class="flex items-start gap-2 text-sm text-white/90"><svg class="mt-0.5 h-4 w-4 flex-none text-white/90" 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 &amp; SCIM</li>
          <li class="flex items-start gap-2 text-sm text-white/90"><svg class="mt-0.5 h-4 w-4 flex-none text-white/90" 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>Dedicated manager</li>
        </ul>
        <a href="#" class="block rounded-lg bg-white/95 px-4 py-2.5 text-center text-sm font-semibold text-gray-900 transition-colors hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-transparent motion-reduce:transition-none">Choose plan<span class="sr-only"> Scale</span></a>
      </article>
    </li>
  </ul>
</section>