Sample data or your own

Create an onboarding fork with Tailwind CSS offering two ways to begin. Centre a max-w-3xl column with a step label, a heading asking how the person would like to start, and a muted line saying the choice is reversible. Below, two large selectable cards side by side: the left is "Explore with sample data" with a glyph tile, a paragraph, three bullet points with check glyphs, and a small "About 2 minutes" note; the right is "Connect my own data" with its own glyph, paragraph, three bullets, a note reading "About 15 minutes" and a small pill listing supported sources. The recommended card carries a neutral-900 ring and a small label. Under the cards, a bordered strip explaining that sample workspaces can be deleted in one click and that connecting real data later keeps everything already built. Finish with a ghost Back and a dark Continue.

<section class="mx-auto max-w-3xl px-6 py-14">
  <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Step 1 of 4</p>
  <h1 class="mt-3 text-2xl font-semibold tracking-tight text-neutral-900">How would you like to start?</h1>
  <p class="mt-1.5 text-sm text-neutral-500">Either path leads to the same place, and you can switch whenever you like.</p>

  <div class="mt-8 grid gap-4 md:grid-cols-2">
    <button class="relative rounded-2xl border border-neutral-200 bg-white p-7 text-left ring-1 ring-neutral-900 transition hover:bg-neutral-50">
      <span class="absolute right-5 top-5 rounded-full bg-neutral-900 px-2.5 py-0.5 text-[11px] font-medium text-white">Recommended</span>
      <span class="grid h-11 w-11 place-items-center rounded-xl 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>
      <p class="mt-4 text-base font-semibold text-neutral-900">Explore with sample data</p>
      <p class="mt-2 text-sm leading-relaxed text-neutral-500">
        A realistic workspace with two years of orders, customers and events already loaded.
      </p>
      <ul class="mt-4 space-y-2 text-sm text-neutral-600">
        <li class="flex items-start gap-2"><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>Nothing to connect or configure</span></li>
        <li class="flex items-start gap-2"><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>Prebuilt reports you can take apart</span></li>
        <li class="flex items-start gap-2"><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>Safe to break entirely</span></li>
      </ul>
      <p class="mt-5 text-xs text-neutral-400">About 2 minutes</p>
    </button>

    <button class="rounded-2xl border border-neutral-200 bg-white p-7 text-left transition hover:bg-neutral-50">
      <span class="grid h-11 w-11 place-items-center rounded-xl 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"><rect x="4" y="3" width="16" height="7" rx="2"/><rect x="4" y="14" width="16" height="7" rx="2"/><path d="M8 6.5h.01M8 17.5h.01M12 6.5h5M12 17.5h5"/></svg></span>
      <p class="mt-4 text-base font-semibold text-neutral-900">Connect my own data</p>
      <p class="mt-2 text-sm leading-relaxed text-neutral-500">
        Point us at a warehouse or database and build against the real thing from the first minute.
      </p>
      <ul class="mt-4 space-y-2 text-sm text-neutral-600">
        <li class="flex items-start gap-2"><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>Read-only connection, always</span></li>
        <li class="flex items-start gap-2"><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>Schema detected automatically</span></li>
        <li class="flex items-start gap-2"><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>Your first report uses real numbers</span></li>
      </ul>
      <p class="mt-5 text-xs text-neutral-400">About 15 minutes</p>
      <span class="mt-3 inline-flex rounded-full bg-neutral-100 px-2.5 py-1 text-[11px] text-neutral-600">Snowflake · BigQuery · Postgres · Redshift</span>
    </button>
  </div>

  <p class="mt-6 rounded-xl border border-neutral-200 bg-neutral-50 px-5 py-4 text-sm leading-relaxed text-neutral-600">
    Sample workspaces can be deleted in one click, and connecting real data later keeps every report you built in the meantime — the fields are mapped for you.
  </p>

  <div class="mt-8 flex items-center justify-between border-t border-neutral-200 pt-5">
    <button class="rounded-xl px-4 py-2.5 text-sm font-medium text-neutral-600 transition hover:bg-neutral-50">Back</button>
    <button class="rounded-xl bg-neutral-900 px-6 py-2.5 text-sm font-medium text-white transition hover:bg-neutral-800">Continue with sample data</button>
  </div>
</section>