Create a customer decision diary testimonial with Tailwind CSS. Present one customer story as three dated moments: the old constraint, the turning point, and the measurable result. Use a vertical timeline, short first-person excerpts, one highlighted metric, a compact customer profile, and a link to the full case study. Keep it editorial and credible rather than promotional.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Create a customer decision diary testimonial with Tailwind CSS. Present one customer story as three dated moments: the old constraint, the turning point, and the measurable result. Use a vertical timeline, short first-person excerpts, one highlighted metric, a compact customer profile, and a link to the full case study. Keep it editorial and credible rather than promotional.
<section class="bg-[#f4f1eb] px-6 py-16"><div class="mx-auto grid max-w-5xl gap-12 lg:grid-cols-[0.7fr_1.3fr]"><div><p class="text-xs font-semibold uppercase tracking-[0.2em] text-neutral-500">Customer decision diary</p><blockquote class="mt-5 text-3xl font-medium leading-tight tracking-tight text-neutral-950">“The real win was getting our team to make the same decision from the same evidence.”</blockquote><div class="mt-7 flex items-center gap-3"><span class="flex h-11 w-11 items-center justify-center rounded-full bg-neutral-900 text-xs text-white">AR</span><div><p class="text-sm font-semibold text-neutral-900">Amelia Ross</p><p class="text-xs text-neutral-500">VP Product · Fieldwork</p></div></div><a href="#" class="mt-8 inline-block border-b border-neutral-900 pb-1 text-sm font-medium">Read the complete story</a></div><ol class="relative space-y-4 before:absolute before:bottom-8 before:left-[19px] before:top-8 before:w-px before:bg-neutral-300"><li class="relative flex gap-4"><span class="z-10 mt-5 h-10 w-10 shrink-0 rounded-full border-8 border-[#f4f1eb] bg-neutral-400"></span><article class="rounded-2xl bg-white p-5"><time class="text-xs font-medium text-neutral-400">March · The constraint</time><p class="mt-2 text-sm leading-6 text-neutral-700">“Research lived in recordings, decisions lived in meetings, and neither could explain the other.”</p></article></li><li class="relative flex gap-4"><span class="z-10 mt-5 h-10 w-10 shrink-0 rounded-full border-8 border-[#f4f1eb] bg-violet-500"></span><article class="rounded-2xl bg-white p-5"><time class="text-xs font-medium text-violet-600">May · The turning point</time><p class="mt-2 text-sm leading-6 text-neutral-700">“Our first shared evidence review replaced three status meetings in a single week.”</p></article></li><li class="relative flex gap-4"><span class="z-10 mt-5 h-10 w-10 shrink-0 rounded-full border-8 border-[#f4f1eb] bg-green-500"></span><article class="flex items-center justify-between gap-5 rounded-2xl bg-neutral-950 p-5 text-white"><div><time class="text-xs font-medium text-white/50">August · The result</time><p class="mt-2 text-sm leading-6 text-white/70">Decision cycle, measured across 14 launches</p></div><strong class="text-4xl tracking-tight">−41%</strong></article></li></ol></div></section>
