Create a two-column "how it works" section with Tailwind CSS where the visual sticks while the copy scrolls. The left column is a sticky panel from lg up — top-24, self-start — holding a rounded-2xl neutral-900 card with a mock interface inside: a title bar of three dots, a stack of skeleton rows, and one highlighted row that reads like a log entry. The right column is a list of four numbered steps, each generously spaced with a numeral in a bordered circle, a medium-weight heading, a paragraph of relaxed grey prose and a small monospaced detail line. Give each step a left border that turns neutral-900 for the first one. Under the last step, a text link with an arrow. Collapse to one column below lg with the visual first and no stickiness.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Create a two-column "how it works" section with Tailwind CSS where the visual sticks while the copy scrolls. The left column is a sticky panel from lg up — top-24, self-start — holding a rounded-2xl neutral-900 card with a mock interface inside: a title bar of three dots, a stack of skeleton rows, and one highlighted row that reads like a log entry. The right column is a list of four numbered steps, each generously spaced with a numeral in a bordered circle, a medium-weight heading, a paragraph of relaxed grey prose and a small monospaced detail line. Give each step a left border that turns neutral-900 for the first one. Under the last step, a text link with an arrow. Collapse to one column below lg with the visual first and no stickiness.
<section class="mx-auto max-w-6xl px-6 py-20">
<div class="mb-14 max-w-xl">
<p class="text-xs font-medium uppercase tracking-widest text-neutral-400">How it works</p>
<h2 class="mt-3 text-3xl font-semibold tracking-tight text-neutral-900">From first request to signed audit trail</h2>
</div>
<div class="grid gap-12 lg:grid-cols-2 lg:gap-16">
<div class="lg:sticky lg:top-24 lg:self-start">
<div class="rounded-2xl bg-neutral-900 p-6 shadow-xl">
<div class="flex gap-1.5">
<span class="h-2.5 w-2.5 rounded-full bg-neutral-700"></span>
<span class="h-2.5 w-2.5 rounded-full bg-neutral-700"></span>
<span class="h-2.5 w-2.5 rounded-full bg-neutral-700"></span>
</div>
<div class="mt-6 space-y-3">
<div class="h-2.5 w-3/4 rounded-full bg-neutral-800"></div>
<div class="h-2.5 w-1/2 rounded-full bg-neutral-800"></div>
<div class="rounded-lg border border-neutral-700 bg-neutral-800/60 p-3 font-mono text-xs text-neutral-300">
<span class="text-green-400"><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> policy.check passed · 41ms · signed
</div>
<div class="h-2.5 w-2/3 rounded-full bg-neutral-800"></div>
<div class="h-2.5 w-5/6 rounded-full bg-neutral-800"></div>
<div class="h-2.5 w-1/3 rounded-full bg-neutral-800"></div>
</div>
<div class="mt-6 flex items-center justify-between border-t border-neutral-800 pt-4 text-xs text-neutral-500">
<span class="font-mono">run 4f21c9</span>
<span>2.4s total</span>
</div>
</div>
</div>
<ol class="space-y-12">
<li class="border-l-2 border-neutral-900 pl-6">
<span class="grid h-8 w-8 place-items-center rounded-full border border-neutral-900 text-sm font-medium text-neutral-900">1</span>
<h3 class="mt-4 text-lg font-medium text-neutral-900">Point us at your endpoint</h3>
<p class="mt-2 leading-relaxed text-neutral-500">One URL and a signing secret. No agent to install, nothing to run inside your VPC.</p>
<p class="mt-3 font-mono text-xs text-neutral-400">POST /v1/sources</p>
</li>
<li class="border-l-2 border-neutral-200 pl-6">
<span class="grid h-8 w-8 place-items-center rounded-full border border-neutral-300 text-sm font-medium text-neutral-500">2</span>
<h3 class="mt-4 text-lg font-medium text-neutral-900">Write the policy once</h3>
<p class="mt-2 leading-relaxed text-neutral-500">Rules are plain expressions with autocomplete, versioned in the same repo as your code.</p>
<p class="mt-3 font-mono text-xs text-neutral-400">allow if actor.role in ["admin"]</p>
</li>
<li class="border-l-2 border-neutral-200 pl-6">
<span class="grid h-8 w-8 place-items-center rounded-full border border-neutral-300 text-sm font-medium text-neutral-500">3</span>
<h3 class="mt-4 text-lg font-medium text-neutral-900">Dry-run against real traffic</h3>
<p class="mt-2 leading-relaxed text-neutral-500">Shadow mode replays yesterday so you see exactly what would have been blocked before anything is.</p>
<p class="mt-3 font-mono text-xs text-neutral-400">mode: shadow · 1.2M decisions</p>
</li>
<li class="border-l-2 border-neutral-200 pl-6">
<span class="grid h-8 w-8 place-items-center rounded-full border border-neutral-300 text-sm font-medium text-neutral-500">4</span>
<h3 class="mt-4 text-lg font-medium text-neutral-900">Ship it, keep the receipts</h3>
<p class="mt-2 leading-relaxed text-neutral-500">Every decision is signed and exportable, which is the part your auditor actually asks for.</p>
<p class="mt-3 font-mono text-xs text-neutral-400">GET /v1/audit?from=2026-01-01</p>
<a href="#" class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-neutral-900 underline-offset-4 hover:underline">Read the integration guide <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 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg></a>
</li>
</ol>
</div>
</section>
