How to build a responsive four‑step onboarding section with Tailwind CSS

Overview

This post shows how to build a responsive four‑step onboarding section using Tailwind CSS only. It features a section header, a mobile vertical separator between cards, a desktop horizontal separator above the grid, rounded cards with a soft gradient, and a floating number badge that switches position across breakpoints.

We’ll cover:

Header copy and layout
The wrapper with separators for mobile and desktop
A 4‑column grid from md: upwards
The step card: background, outline, shadow
The absolute number badge and mobile separator
Content spacing adjustments for small vs large screens

1 — Header block

Place the heading and intro in a narrow container so the copy reads comfortably.

html

<div class="max-w-3xl">
  <h2 class="text-2xl md:text-3xl lg:text-4xl font-semibold tracking-tight text-zinc-900 text-balance">
    Onboard in four simple steps
  </h2>
  <p class="text-base mt-2 font-medium text-zinc-500">
    Follow the steps below to set up your account and start managing your
    finances in minutes.
  </p>
</div>

2 — Wrapper and separators

Use a relative wrapper so the desktop horizontal separator can sit above the grid. On mobile, each card renders its own small vertical separator on the left.

html

<div class="relative flex flex-col items-center mt-24">
  <!-- Desktop horizontal separator (hidden on small screens) -->
  <div
    data-orientation="horizontal"
    class="bg-zinc-200 shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px absolute -top-8 left-0 hidden md:block"
  ></div>
  <!-- Steps grid goes here -->
</div>

3 — Steps grid

From md: upwards, switch to a four‑column grid with gaps.

html

<div class="grid gap-4 md:grid-cols-4">
  <!-- four step cards -->
</div>

4 — Step card styling

Cards use a soft gradient, subtle outline, rounded corners, and a light shadow for depth.

html

<div class="relative p-4 shadow space-y-2 bg-linear-180 outline outline-zinc-100 from-zinc-50 to-zinc-100 rounded-xl">
  <!-- mobile vertical separator (visible only below md) -->
  <div
    data-orientation="vertical"
    role="none"
    data-slot="separator-root"
    class="shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px absolute top-6 left-0 block md:hidden"
  ></div>
  <!-- number badge and content go here -->
</div>

5 — Number badge positioning

The circular number badge is absolutely positioned. On mobile it sits inside the card at the top‑left; on desktop it “floats” above the card with md:-top-12.

html

<div class="absolute top-0 -left-[9px] z-10 flex size-8 items-center justify-center rounded-full bg-zinc-100 p-1 md:-top-12 md:left-0">
  <span class="text-sm font-medium text-zinc-900"> 1 </span>
</div>

6 — Content spacing

Shift content right on mobile (pl-7) to clear the badge, and remove the padding on desktop (md:pl-0).

html

<div class="pl-7 md:pl-0">
  <h3 class="text-base font-semibold tracking-tight text-zinc-900">Data Collection</h3>
  <p class="text-sm text-zinc-500 lg:text-balance">Gather and preprocess raw data for your models.</p>
</div>

Full snippet

Paste the full example below anywhere Tailwind is available. It’s fully static (no JS required).

html

<div class="max-w-3xl">
  <h2
    class="text-2xl md:text-3xl lg:text-4xl font-semibold tracking-tight text-zinc-900 text-balance"
  >
    Onboard in four simple steps
  </h2>
  <p class="text-base mt-2 font-medium text-zinc-500">
    Follow the steps below to set up your account and start managing your
    finances in minutes.
  </p>
</div>
<div class="relative flex flex-col items-center mt-24">
  <div
    data-orientation="horizontal"
    class="bg-zinc-200 shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px absolute -top-8 left-0 hidden md:block"
  ></div>
  <div class="grid gap-4 md:grid-cols-4">
    <div
      class="relative p-4 shadow space-y-2 bg-linear-180 outline outline-zinc-100 from-zinc-50 to-zinc-100 rounded-xl"
    >
      <div
        data-orientation="vertical"
        role="none"
        data-slot="separator-root"
        class="shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px absolute top-6 left-0 block md:hidden"
      ></div>
      <div
        class="absolute top-0 -left-[9px] z-10 flex size-8 items-center justify-center rounded-full bg-zinc-100 p-1 md:-top-12 md:left-0"
      >
        <span class="text-sm font-medium text-zinc-900"> 1 </span>
      </div>
      <div class="pl-7 md:pl-0">
        <h3 class="text-base font-semibold tracking-tight text-zinc-900">
          Data Collection
        </h3>
        <p class="text-sm text-zinc-500 lg:text-balance">
          Gather and preprocess raw data for your models.
        </p>
      </div>
    </div>
    <div
      class="relative p-4 shadow space-y-2 bg-linear-180 outline outline-zinc-100 from-zinc-50 to-zinc-100 rounded-xl"
    >
      <div
        data-orientation="vertical"
        role="none"
        data-slot="separator-root"
        class="shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px absolute top-6 left-0 block md:hidden"
      ></div>
      <div
        class="absolute top-0 -left-[9px] z-10 flex size-8 items-center justify-center rounded-full bg-zinc-100 p-1 md:-top-12 md:left-0"
      >
        <span class="text-sm font-medium text-zinc-900"> 2 </span>
      </div>
      <div class="pl-7 md:pl-0">
        <h3 class="text-base font-semibold tracking-tight text-zinc-900">
          Model Training
        </h3>
        <p class="text-sm text-zinc-500 lg:text-balance">
          Train algorithms to detect patterns and make predictions.
        </p>
      </div>
    </div>
    <div
      class="relative p-4 shadow space-y-2 bg-linear-180 outline outline-zinc-100 from-zinc-50 to-zinc-100 rounded-xl"
    >
      <div
        data-orientation="vertical"
        role="none"
        data-slot="separator-root"
        class="shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px absolute top-6 left-0 block md:hidden"
      ></div>
      <div
        class="absolute top-0 -left-[9px] z-10 flex size-8 items-center justify-center rounded-full bg-zinc-100 p-1 md:-top-12 md:left-0"
      >
        <span class="text-sm font-medium text-zinc-900"> 3 </span>
      </div>
      <div class="pl-7 md:pl-0">
        <h3 class="text-base font-semibold tracking-tight text-zinc-900">
          Performance Tuning
        </h3>
        <p class="text-sm text-zinc-500 lg:text-balance">
          Optimize models for accuracy and efficiency.
        </p>
      </div>
    </div>
    <div
      class="relative p-4 shadow space-y-2 bg-linear-180 outline outline-zinc-100 from-zinc-50 to-zinc-100 rounded-xl"
    >
      <div
        data-orientation="vertical"
        role="none"
        data-slot="separator-root"
        class="shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px absolute top-6 left-0 block md:hidden"
      ></div>
      <div
        class="absolute top-0 -left-[9px] z-10 flex size-8 items-center justify-center rounded-full bg-zinc-100 p-1 md:-top-12 md:left-0"
      >
        <span class="text-sm font-medium text-zinc-900"> 4 </span>
      </div>
      <div class="pl-7 md:pl-0">
        <h3 class="text-base font-semibold tracking-tight text-zinc-900">
          Deployment
        </h3>
        <p class="text-sm text-zinc-500 lg:text-balance">
          Launch your AI solution and monitor performance.
        </p>
      </div>
    </div>
  </div>
</div>

Wrap‑up

The layout keeps the DOM simple: a single grid with four cards and two kinds of separators — a global horizontal rule at desktop and local vertical rules for mobile. Absolute badges avoid shifting content by pairing pl-7 on mobile with md:pl-0 on larger screens.

/Michael Andreuzza