Build a centred hero with Tailwind CSS whose headline swaps one word on a timer. The layout is a max-w-3xl centred column: a muted eyebrow in small caps, then a two-line headline where the second line ends with a highlighted span sitting on a neutral-100 rounded box that holds the rotating word, a paragraph, and a pair of buttons — a dark primary and a bordered secondary with a play glyph. Under the buttons, a single line of muted text naming four customer types separated by dots. Then add JavaScript that cycles the highlighted word through a list of four audiences every two and a half seconds using a fade-and-lift transition, measures the widest word once on load so the box never jumps in width, and pauses the rotation while the tab is hidden.
Build a centred hero with Tailwind CSS whose headline swaps one word on a timer. The layout is a max-w-3xl centred column: a muted eyebrow in small caps, then a two-line headline where the second line ends with a highlighted span sitting on a neutral-100 rounded box that holds the rotating word, a paragraph, and a pair of buttons — a dark primary and a bordered secondary with a play glyph. Under the buttons, a single line of muted text naming four customer types separated by dots. Then add JavaScript that cycles the highlighted word through a list of four audiences every two and a half seconds using a fade-and-lift transition, measures the widest word once on load so the box never jumps in width, and pauses the rotation while the tab is hidden.
<section class="bg-white px-6 py-28">
<div class="mx-auto max-w-3xl text-center">
<p class="text-xs font-medium uppercase tracking-[0.2em] text-neutral-400">Scheduling, solved</p>
<h1 class="mt-5 text-5xl font-semibold leading-[1.08] tracking-tight text-neutral-900 sm:text-6xl">
The calendar that works<br class="hidden sm:block" />
the way
<span class="inline-flex items-center rounded-xl bg-neutral-100 px-3 py-1 align-middle">
<span id="rotator" class="inline-block text-neutral-900 transition-all duration-300">clinics</span>
</span>
do
</h1>
<p class="mx-auto mt-6 max-w-xl text-lg leading-relaxed text-neutral-500">
Rules for buffers, travel time and double-booking that match how your team actually runs its day.
</p>
<div class="mt-9 flex flex-wrap items-center justify-center gap-3">
<a href="#" class="rounded-xl bg-neutral-900 px-6 py-3 text-sm font-medium text-white transition hover:bg-neutral-800">Start free</a>
<a href="#" class="flex items-center gap-2 rounded-xl border border-neutral-200 px-6 py-3 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50"><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="m9 7 9 5-9 5V7Z" fill="currentColor" stroke="none"/></svg> Watch the 2-minute tour</a>
</div>
<p class="mt-10 text-xs text-neutral-400">Clinics · Studios · Field teams · Universities</p>
</div>
</section>
Build a centred hero with Tailwind CSS whose headline swaps one word on a timer. The layout is a max-w-3xl centred column: a muted eyebrow in small caps, then a two-line headline where the second line ends with a highlighted span sitting on a neutral-100 rounded box that holds the rotating word, a paragraph, and a pair of buttons — a dark primary and a bordered secondary with a play glyph. Under the buttons, a single line of muted text naming four customer types separated by dots. Then add JavaScript that cycles the highlighted word through a list of four audiences every two and a half seconds using a fade-and-lift transition, measures the widest word once on load so the box never jumps in width, and pauses the rotation while the tab is hidden.