Workspace invite acceptance

Build an invitation acceptance card with Tailwind CSS for someone opening a team invite link. Centre a max-w-md white card on a neutral-50 page. At the top, two overlapping circles — the inviter avatar and the workspace logo tile — with a small dark check badge between them, then a heading reading "Jules invited you to Studioform" and a muted line with the workspace domain. Add a bordered summary block showing the role being granted as a pill, the number of teammates already in the workspace as a row of stacked avatars with a plus-two counter, and the invited email address in monospace. Under it, a full-width dark "Accept invitation" button, a ghost "Decline" button beneath it, and a small print line explaining the invite expires in seven days and that the workspace admin can see when it is accepted.

<div class="flex min-h-screen items-center justify-center bg-neutral-50 px-6 py-14">
  <div class="w-full max-w-md rounded-2xl border border-neutral-200 bg-white p-8 text-center shadow-sm">
    <div class="mb-6 flex items-center justify-center">
      <span class="grid h-14 w-14 place-items-center rounded-full bg-amber-500 text-lg font-medium text-white ring-4 ring-white">JP</span>
      <span class="-ml-3 grid h-14 w-14 place-items-center rounded-2xl bg-neutral-900 text-white ring-4 ring-white"><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="m12 3 9 9-9 9-9-9 9-9Z"/><path d="m12 7 5 5-5 5-5-5 5-5Z"/></svg></span>
    </div>

    <h1 class="text-xl font-semibold tracking-tight text-neutral-900">Jules invited you to Studioform</h1>
    <p class="mt-1.5 text-sm text-neutral-500">studioform.io · shared workspace</p>

    <div class="mt-6 space-y-3 rounded-xl border border-neutral-200 bg-neutral-50 p-4 text-left text-sm">
      <div class="flex items-center justify-between">
        <span class="text-neutral-500">Your role</span>
        <span class="rounded-full bg-white px-2.5 py-1 text-xs font-medium text-neutral-700 ring-1 ring-neutral-200">Editor</span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-neutral-500">Teammates</span>
        <span class="flex items-center">
          <span class="grid h-7 w-7 place-items-center rounded-full bg-neutral-900 text-[11px] text-white ring-2 ring-neutral-50">RM</span>
          <span class="-ml-2 grid h-7 w-7 place-items-center rounded-full bg-green-600 text-[11px] text-white ring-2 ring-neutral-50">DK</span>
          <span class="-ml-2 grid h-7 w-7 place-items-center rounded-full bg-neutral-200 text-[11px] font-medium text-neutral-600 ring-2 ring-neutral-50">+9</span>
        </span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-neutral-500">Invited address</span>
        <span class="font-mono text-xs text-neutral-900">[email protected]</span>
      </div>
    </div>

    <button class="mt-6 w-full rounded-xl bg-neutral-900 py-3 text-sm font-medium text-white transition hover:bg-neutral-800">Accept invitation</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">Decline</button>

    <p class="mt-6 text-xs leading-relaxed text-neutral-400">This invitation expires in 7 days. Workspace admins can see when it is accepted.</p>
  </div>
</div>