Setup complete celebration

Design a setup completion screen with Tailwind CSS. Centre a max-w-xl card with generous padding. At the top, a green tinted circle holding a large check glyph with a lighter ring around it, a heading reading "You are all set", and a muted line summarising what was configured. Below, a bordered rounded-xl recap list of four completed items, each with a small green check, a label and a muted value on the right — workspace name, region, connected source and teammates invited. Under that, a "What next" area with three action rows, each a bordered card with a glyph tile, a title, a one-line description and a chevron, covering building a first report, inviting more people and reading the quickstart. Finish with a full-width dark button to open the dashboard and a small centred line offering a link to book an onboarding call.

<section class="flex justify-center bg-neutral-50 px-6 py-16">
  <div class="w-full max-w-xl rounded-2xl border border-neutral-200 bg-white p-9 text-center shadow-sm">
    <div class="mx-auto grid h-16 w-16 place-items-center rounded-full bg-green-100 text-2xl text-green-700 ring-8 ring-green-50"><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></div>

    <h1 class="mt-6 text-2xl font-semibold tracking-tight text-neutral-900">You are all set</h1>
    <p class="mt-2 text-sm leading-relaxed text-neutral-500">Your workspace is live, the first source is syncing, and the team has been invited. Setup took 6 minutes.</p>

    <dl class="mt-8 divide-y divide-neutral-100 rounded-xl border border-neutral-200 text-left text-sm">
      <div class="flex items-center justify-between px-4 py-3">
        <dt class="flex items-center gap-2 text-neutral-600"><span class="text-green-600"><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></span> Workspace</dt>
        <dd class="font-medium text-neutral-900">Studioform</dd>
      </div>
      <div class="flex items-center justify-between px-4 py-3">
        <dt class="flex items-center gap-2 text-neutral-600"><span class="text-green-600"><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></span> Region</dt>
        <dd class="font-medium text-neutral-900">EU · Frankfurt</dd>
      </div>
      <div class="flex items-center justify-between px-4 py-3">
        <dt class="flex items-center gap-2 text-neutral-600"><span class="text-green-600"><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></span> Connected source</dt>
        <dd class="font-medium text-neutral-900">Snowflake · syncing</dd>
      </div>
      <div class="flex items-center justify-between px-4 py-3">
        <dt class="flex items-center gap-2 text-neutral-600"><span class="text-green-600"><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></span> Teammates invited</dt>
        <dd class="font-medium text-neutral-900">4 people</dd>
      </div>
    </dl>

    <p class="mt-8 text-left text-xs font-semibold uppercase tracking-widest text-neutral-400">What next</p>
    <div class="mt-3 space-y-2.5 text-left">
      <a href="#" class="flex items-center gap-3.5 rounded-xl border border-neutral-200 p-4 transition hover:border-neutral-300 hover:bg-neutral-50">
        <span class="grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><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="M4 20V10m5 10V4m6 16v-7m5 7V7"/></svg></span>
        <span class="min-w-0 flex-1">
          <span class="block text-sm font-medium text-neutral-900">Build your first report</span>
          <span class="block text-xs text-neutral-500">Start from a template — about four minutes.</span>
        </span>
        <span class="text-neutral-300">›</span>
      </a>
      <a href="#" class="flex items-center gap-3.5 rounded-xl border border-neutral-200 p-4 transition hover:border-neutral-300 hover:bg-neutral-50">
        <span class="grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><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="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg></span>
        <span class="min-w-0 flex-1">
          <span class="block text-sm font-medium text-neutral-900">Invite the rest of the team</span>
          <span class="block text-xs text-neutral-500">Seats are unlimited on your plan.</span>
        </span>
        <span class="text-neutral-300">›</span>
      </a>
      <a href="#" class="flex items-center gap-3.5 rounded-xl border border-neutral-200 p-4 transition hover:border-neutral-300 hover:bg-neutral-50">
        <span class="grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><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="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-6-6Z"/><path d="M14 3v6h6M8 13h8M8 17h6"/></svg></span>
        <span class="min-w-0 flex-1">
          <span class="block text-sm font-medium text-neutral-900">Read the quickstart</span>
          <span class="block text-xs text-neutral-500">The ten things worth knowing early.</span>
        </span>
        <span class="text-neutral-300">›</span>
      </a>
    </div>

    <button class="mt-8 w-full rounded-xl bg-neutral-900 py-3 text-sm font-medium text-white transition hover:bg-neutral-800">Open the dashboard</button>
    <p class="mt-3 text-xs text-neutral-400">Would rather be walked through it? <a href="#" class="font-medium text-neutral-600 underline underline-offset-4 hover:text-neutral-900">Book 20 minutes with us</a>.</p>
  </div>
</section>