Resume onboarding banner

Design an in-app resume banner with Tailwind CSS for someone who abandoned setup partway. Use a max-w-4xl bordered rounded-2xl card with a neutral-50 background. The left side has a small "Setup unfinished" pill, a heading naming what remains, a one-line explanation of what unlocks when it is done, and a progress row with a thin track at forty percent, a "2 of 5 steps" label and the time estimate for the rest. The right side is a compact list of the five steps, each a row with a numbered circle that is filled and ticked for the two completed ones, the step name, and a muted status word — done, next, or a faint "later"; the next step carries a small dark "Continue" button. Under both, a bottom bar with a muted dismiss link on the left and a note that setup can be finished from the account menu at any time.

<section class="mx-auto max-w-4xl px-6 py-12">
  <div class="grid gap-8 rounded-2xl border border-neutral-200 bg-neutral-50 p-8 lg:grid-cols-[1fr_320px]">
    <div>
      <span class="inline-flex rounded-full border border-neutral-200 bg-white px-3 py-1 text-xs font-medium text-neutral-600">Setup unfinished</span>
      <h2 class="mt-4 text-2xl font-semibold tracking-tight text-neutral-900">Three steps left, about six minutes</h2>
      <p class="mt-2 max-w-md leading-relaxed text-neutral-500">
        Finishing unlocks scheduled reports and shared dashboards. Until then the workspace works, but only for you.
      </p>

      <div class="mt-7 max-w-sm">
        <div class="h-2 overflow-hidden rounded-full bg-neutral-200">
          <div class="h-full w-[40%] rounded-full bg-neutral-900"></div>
        </div>
        <div class="mt-2 flex items-center justify-between text-xs text-neutral-500">
          <span class="font-medium text-neutral-900">2 of 5 steps</span>
          <span>~6 minutes remaining</span>
        </div>
      </div>
    </div>

    <div class="space-y-1">
      <div class="flex items-center gap-3 rounded-xl bg-white px-3 py-2.5 ring-1 ring-neutral-200">
        <span class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-green-100 text-[11px] text-green-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="m5 12.5 4.25 4.25L19 7"/></svg></span>
        <span class="min-w-0 flex-1 text-sm text-neutral-500 line-through">Create your workspace</span>
        <span class="shrink-0 text-xs text-neutral-400">Done</span>
      </div>

      <div class="flex items-center gap-3 rounded-xl bg-white px-3 py-2.5 ring-1 ring-neutral-200">
        <span class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-green-100 text-[11px] text-green-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="m5 12.5 4.25 4.25L19 7"/></svg></span>
        <span class="min-w-0 flex-1 text-sm text-neutral-500 line-through">Invite a teammate</span>
        <span class="shrink-0 text-xs text-neutral-400">Done</span>
      </div>

      <div class="flex items-center gap-3 rounded-xl bg-white px-3 py-2.5 ring-2 ring-neutral-900">
        <span class="grid h-6 w-6 shrink-0 place-items-center rounded-full border border-neutral-900 text-[11px] font-medium text-neutral-900">3</span>
        <span class="min-w-0 flex-1 text-sm font-medium text-neutral-900">Connect a data source</span>
        <button class="shrink-0 rounded-lg bg-neutral-900 px-2.5 py-1 text-[11px] font-medium text-white">Continue</button>
      </div>

      <div class="flex items-center gap-3 rounded-xl bg-white px-3 py-2.5 ring-1 ring-neutral-200">
        <span class="grid h-6 w-6 shrink-0 place-items-center rounded-full border border-neutral-200 text-[11px] text-neutral-400">4</span>
        <span class="min-w-0 flex-1 text-sm text-neutral-400">Build your first report</span>
        <span class="shrink-0 text-xs text-neutral-300">Later</span>
      </div>

      <div class="flex items-center gap-3 rounded-xl bg-white px-3 py-2.5 ring-1 ring-neutral-200">
        <span class="grid h-6 w-6 shrink-0 place-items-center rounded-full border border-neutral-200 text-[11px] text-neutral-400">5</span>
        <span class="min-w-0 flex-1 text-sm text-neutral-400">Set a delivery schedule</span>
        <span class="shrink-0 text-xs text-neutral-300">Later</span>
      </div>
    </div>

    <div class="flex flex-wrap items-center justify-between gap-3 border-t border-neutral-200 pt-5 lg:col-span-2">
      <button class="text-sm text-neutral-500 underline-offset-4 hover:text-neutral-900 hover:underline">Hide this for now</button>
      <p class="text-xs text-neutral-400">You can always finish setup from the account menu.</p>
    </div>
  </div>
</section>