Renewal reminder banner

Design an account renewal notice with Tailwind CSS. Use a max-w-3xl bordered rounded-2xl card with a neutral-900 header strip holding a calendar glyph, a heading reading "Your annual plan renews in 21 days" and the exact date in a monospaced pill on the right. The body is a two-column grid on sm: the left column lists the renewal terms as three labelled rows — plan, seats and amount, each with the value in medium weight and one showing a small "up from 20" note; the right column is a bordered neutral-50 block explaining what happens if nothing is done, in two short sentences. Below, a button row with a dark "Renew now and lock this rate", a bordered "Change plan" and a muted text link reading "Cancel renewal", plus a final line noting that a purchase order or updated billing details can be sent to the finance mailbox.

<section class="mx-auto max-w-3xl px-6 py-14">
  <div class="overflow-hidden rounded-2xl border border-neutral-200 bg-white">
    <div class="flex flex-wrap items-center justify-between gap-3 bg-neutral-900 px-7 py-5 text-white">
      <div class="flex items-center gap-3">
        <span class="grid h-10 w-10 place-items-center rounded-xl bg-white/10"><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"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></svg></span>
        <h2 class="text-base font-semibold">Your annual plan renews in 21 days</h2>
      </div>
      <span class="rounded-full bg-white/10 px-3 py-1 font-mono text-xs">08 Sep 2026</span>
    </div>

    <div class="grid gap-6 p-7 sm:grid-cols-2">
      <dl class="space-y-4 text-sm">
        <div class="flex items-baseline justify-between gap-4">
          <dt class="text-neutral-500">Plan</dt>
          <dd class="font-medium text-neutral-900">Scale · annual</dd>
        </div>
        <div class="flex items-baseline justify-between gap-4">
          <dt class="text-neutral-500">Seats</dt>
          <dd class="text-right">
            <span class="font-medium text-neutral-900">24</span>
            <span class="ml-1 text-xs text-neutral-400">up from 20</span>
          </dd>
        </div>
        <div class="flex items-baseline justify-between gap-4 border-t border-neutral-200 pt-4">
          <dt class="text-neutral-500">Amount</dt>
          <dd class="font-mono text-lg font-semibold text-neutral-900">$17,136</dd>
        </div>
      </dl>

      <div class="rounded-xl border border-neutral-200 bg-neutral-50 p-5">
        <p class="text-sm font-medium text-neutral-900">If you do nothing</p>
        <p class="mt-2 text-sm leading-relaxed text-neutral-500">
          We charge the card on file on 8 September and the plan continues for another year at this rate. Seat changes made before then are included automatically.
        </p>
      </div>
    </div>

    <div class="flex flex-wrap items-center gap-3 border-t border-neutral-200 px-7 py-5">
      <button class="rounded-xl bg-neutral-900 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-neutral-800">Renew now and lock this rate</button>
      <button class="rounded-xl border border-neutral-200 px-4 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50">Change plan</button>
      <button class="text-sm text-neutral-500 underline-offset-4 hover:text-neutral-900 hover:underline">Cancel renewal</button>
    </div>

    <p class="border-t border-neutral-200 bg-neutral-50 px-7 py-4 text-xs leading-relaxed text-neutral-500">
      Need a purchase order, a W-9 or updated billing details on the invoice? Send them to <a href="#" class="font-medium text-neutral-900 underline underline-offset-2">[email protected]</a> and we will reissue before the charge date.
    </p>
  </div>
</section>