Email preferences page

Build an email preferences page with Tailwind CSS, the destination of an unsubscribe link. Centre a max-w-xl card with a heading, a muted line naming the address being managed, and a small "You clicked unsubscribe in an email" note. The body offers four options as bordered radio rows: pause for thirty days, reduce to a monthly summary, keep only account and security email, and unsubscribe from everything; each has a title, a one-line consequence and a small tag where useful. The third option is preselected. Under the options, a collapsible "Choose individually" section revealing six checkboxes for specific lists. Finish with a dark Save button and a ghost "Keep everything as it is" link, plus a footnote noting that account and security messages cannot be switched off and explaining why.

<section class="mx-auto max-w-xl px-6 py-14">
  <div class="rounded-2xl border border-neutral-200 bg-white p-8 shadow-sm">
    <h1 class="text-2xl font-semibold tracking-tight text-neutral-900">Email preferences</h1>
    <p class="mt-1.5 text-sm text-neutral-500">Managing <span class="font-medium text-neutral-900">[email protected]</span></p>
    <p class="mt-3 rounded-lg bg-neutral-50 px-3.5 py-2 text-xs text-neutral-500">You clicked unsubscribe in "The Thursday Letter #48". Nothing has changed yet.</p>

    <div class="mt-7 space-y-2.5">
      <label class="flex cursor-pointer items-start gap-3.5 rounded-xl border border-neutral-200 p-4 transition hover:bg-neutral-50">
        <input type="radio" name="pref" class="mt-1 border-neutral-300" />
        <span class="min-w-0 flex-1">
          <span class="flex flex-wrap items-center gap-2">
            <span class="text-sm font-medium text-neutral-900">Pause for 30 days</span>
            <span class="rounded-full bg-neutral-100 px-2 py-0.5 text-[10px] text-neutral-600">Reversible</span>
          </span>
          <span class="block text-xs text-neutral-500">Everything stops until 17 September, then resumes exactly as it was.</span>
        </span>
      </label>

      <label class="flex cursor-pointer items-start gap-3.5 rounded-xl border border-neutral-200 p-4 transition hover:bg-neutral-50">
        <input type="radio" name="pref" class="mt-1 border-neutral-300" />
        <span class="min-w-0 flex-1">
          <span class="block text-sm font-medium text-neutral-900">One monthly summary instead</span>
          <span class="block text-xs text-neutral-500">Roughly four emails become one, on the first Tuesday of the month.</span>
        </span>
      </label>

      <label class="flex cursor-pointer items-start gap-3.5 rounded-xl border-2 border-neutral-900 bg-neutral-50 p-4">
        <input type="radio" name="pref" checked class="mt-1 border-neutral-300" />
        <span class="min-w-0 flex-1">
          <span class="flex flex-wrap items-center gap-2">
            <span class="text-sm font-medium text-neutral-900">Account and security only</span>
            <span class="rounded-full bg-neutral-900 px-2 py-0.5 text-[10px] font-medium text-white">Most chosen</span>
          </span>
          <span class="block text-xs text-neutral-500">No newsletters or product news. Invoices, sign-in alerts and outage notices still arrive.</span>
        </span>
      </label>

      <label class="flex cursor-pointer items-start gap-3.5 rounded-xl border border-neutral-200 p-4 transition hover:bg-neutral-50">
        <input type="radio" name="pref" class="mt-1 border-neutral-300" />
        <span class="min-w-0 flex-1">
          <span class="block text-sm font-medium text-neutral-900">Unsubscribe from everything optional</span>
          <span class="block text-xs text-neutral-500">We will only write when something happens to your account.</span>
        </span>
      </label>
    </div>

    <details class="mt-5 rounded-xl border border-neutral-200 px-5 py-4">
      <summary class="cursor-pointer list-none text-sm font-medium text-neutral-900">Choose individually instead</summary>
      <div class="mt-4 space-y-3 text-sm text-neutral-600">
        <label class="flex items-center gap-2.5"><input type="checkbox" checked class="rounded border-neutral-300" /> The Thursday Letter</label>
        <label class="flex items-center gap-2.5"><input type="checkbox" class="rounded border-neutral-300" /> Product releases</label>
        <label class="flex items-center gap-2.5"><input type="checkbox" class="rounded border-neutral-300" /> Webinars and events</label>
        <label class="flex items-center gap-2.5"><input type="checkbox" checked class="rounded border-neutral-300" /> Weekly workspace digest</label>
        <label class="flex items-center gap-2.5"><input type="checkbox" class="rounded border-neutral-300" /> Research invitations</label>
        <label class="flex items-center gap-2.5"><input type="checkbox" class="rounded border-neutral-300" /> Customer stories</label>
      </div>
    </details>

    <button class="mt-7 w-full rounded-xl bg-neutral-900 py-3 text-sm font-medium text-white transition hover:bg-neutral-800">Save preferences</button>
    <button class="mt-2 w-full rounded-xl py-2.5 text-sm font-medium text-neutral-500 transition hover:bg-neutral-50 hover:text-neutral-900">Keep everything as it is</button>

    <p class="mt-6 border-t border-neutral-200 pt-4 text-xs leading-relaxed text-neutral-400">
      Account and security messages cannot be switched off — they cover invoices, sign-ins from new devices and incidents affecting your data. There are about six a year.
    </p>
  </div>
</section>