One-time licence versus subscription

Build a two-option purchase comparison with Tailwind CSS for a product sold either as a subscription or as a perpetual licence. Use a max-w-4xl section with a centred heading and a muted subline about choosing how to pay. Underneath, two equal cards in a grid. The left card is the subscription: a small label, price per year, a short paragraph, and a bulleted list where every line is a check. The right card is the perpetual licence, visually heavier with a neutral-900 border and a small dark "Own it" ribbon in the corner: a one-time price, a paragraph explaining updates are included for twelve months, and a mixed list where two lines carry a muted cross glyph to show what stops after a year. Under both cards, a full-width neutral-50 strip with three columns comparing cost after one, three and five years, with the cheaper figure in each column set in medium neutral-900 and the other muted.

<section class="mx-auto max-w-4xl px-6 py-16">
  <div class="mx-auto max-w-xl text-center">
    <h2 class="text-3xl font-semibold tracking-tight text-neutral-900">Rent it or own it</h2>
    <p class="mt-3 text-neutral-500">Same editor, same export formats. The only difference is how long the payments last.</p>
  </div>

  <div class="mt-10 grid gap-5 md:grid-cols-2">
    <div class="rounded-2xl border border-neutral-200 bg-white p-7">
      <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Subscription</p>
      <p class="mt-3"><span class="text-4xl font-semibold tracking-tight text-neutral-900">$96</span><span class="ml-1 text-sm text-neutral-500">per year</span></p>
      <p class="mt-3 text-sm leading-relaxed text-neutral-500">Always on the newest version. Cancel and the app reverts to read-only.</p>
      <ul class="mt-6 space-y-2.5 text-sm text-neutral-700">
        <li class="flex items-center gap-2"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> Every update, forever</li>
        <li class="flex items-center gap-2"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> Cloud sync across 5 devices</li>
        <li class="flex items-center gap-2"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> Priority email support</li>
        <li class="flex items-center gap-2"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> Cancel any time</li>
      </ul>
      <button class="mt-7 w-full rounded-xl border border-neutral-200 py-2.5 text-sm font-medium text-neutral-800 transition hover:bg-neutral-50">Subscribe</button>
    </div>

    <div class="relative overflow-hidden rounded-2xl border-2 border-neutral-900 bg-white p-7">
      <span class="absolute right-0 top-0 rounded-bl-xl bg-neutral-900 px-3 py-1 text-[11px] font-medium text-white">Own it</span>
      <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Perpetual licence</p>
      <p class="mt-3"><span class="text-4xl font-semibold tracking-tight text-neutral-900">$249</span><span class="ml-1 text-sm text-neutral-500">once</span></p>
      <p class="mt-3 text-sm leading-relaxed text-neutral-500">Yours to keep. Updates released in the first 12 months are included.</p>
      <ul class="mt-6 space-y-2.5 text-sm text-neutral-700">
        <li class="flex items-center gap-2"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> Runs offline, no account required</li>
        <li class="flex items-center gap-2"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> 12 months of updates</li>
        <li class="flex items-center gap-2 text-neutral-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M6 6l12 12M18 6 6 18"/></svg> Updates after year one cost $79</li>
        <li class="flex items-center gap-2 text-neutral-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M6 6l12 12M18 6 6 18"/></svg> No cloud sync</li>
      </ul>
      <button class="mt-7 w-full rounded-xl bg-neutral-900 py-2.5 text-sm font-medium text-white transition hover:bg-neutral-800">Buy licence</button>
    </div>
  </div>

  <div class="mt-6 grid gap-px overflow-hidden rounded-2xl border border-neutral-200 bg-neutral-200 sm:grid-cols-3">
    <div class="bg-neutral-50 px-5 py-4 text-center">
      <p class="text-xs uppercase tracking-widest text-neutral-400">After 1 year</p>
      <p class="mt-2 text-sm"><span class="font-medium text-neutral-900">$96</span> <span class="text-neutral-400">vs $249</span></p>
    </div>
    <div class="bg-neutral-50 px-5 py-4 text-center">
      <p class="text-xs uppercase tracking-widest text-neutral-400">After 3 years</p>
      <p class="mt-2 text-sm"><span class="text-neutral-400">$288 vs</span> <span class="font-medium text-neutral-900">$249</span></p>
    </div>
    <div class="bg-neutral-50 px-5 py-4 text-center">
      <p class="text-xs uppercase tracking-widest text-neutral-400">After 5 years</p>
      <p class="mt-2 text-sm"><span class="text-neutral-400">$480 vs</span> <span class="font-medium text-neutral-900">$249</span></p>
    </div>
  </div>
</section>