howto

Step-by-step process sections explaining how a product or workflow works.

How To Steps

howto

How it works

Up and running in minutes.

Browse the gallery

Explore blocks by category — Hero, Features, Pricing, CTA, and more. Each category has multiple variants with distinct visual styles.

Preview and inspect

Switch between the live preview and the Code tab. Resize the preview to any breakpoint using the drag handle or preset buttons.

Copy the source

Click Copy to grab the Prettier-formatted HTML. The code is framework-agnostic — use it in any Astro, React, or plain HTML project.

Paste and customise

Drop the block into your project. Every class is plain Tailwind — swap colors, adjust spacing, or restructure the markup however you like.

<section class="bg-white px-6 py-24 lg:px-8">
  <div class="mx-auto max-w-5xl">
    <div class="mb-16 max-w-xl">
      <p
        class="mb-3 text-xs font-semibold uppercase tracking-widest text-violet-600"
      >
        How it works
      </p>
      <h2
        class="text-4xl font-extrabold tracking-tight text-gray-950 sm:text-5xl"
      >
        Up and running in minutes.
      </h2>
    </div>
    <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
      <div class="relative">
        <div class="mb-5 flex items-center gap-3">
          <div
            class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-violet-600 text-xs font-bold text-white"
          >
            1
          </div>
          <div
            class="hidden h-px flex-1 border-t border-dashed border-gray-200 lg:block"
          ></div>
        </div>
        <h3 class="mb-2 text-base font-bold text-gray-950">
          Browse the gallery
        </h3>
        <p class="text-sm leading-6 text-gray-500">
          Explore blocks by category — Hero, Features, Pricing, CTA, and more.
          Each category has multiple variants with distinct visual styles.
        </p>
      </div>
      <div class="relative">
        <div class="mb-5 flex items-center gap-3">
          <div
            class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-violet-600 text-xs font-bold text-white"
          >
            2
          </div>
          <div
            class="hidden h-px flex-1 border-t border-dashed border-gray-200 lg:block"
          ></div>
        </div>
        <h3 class="mb-2 text-base font-bold text-gray-950">
          Preview and inspect
        </h3>
        <p class="text-sm leading-6 text-gray-500">
          Switch between the live preview and the Code tab. Resize the preview
          to any breakpoint using the drag handle or preset buttons.
        </p>
      </div>
      <div class="relative">
        <div class="mb-5 flex items-center gap-3">
          <div
            class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-violet-600 text-xs font-bold text-white"
          >
            3
          </div>
          <div
            class="hidden h-px flex-1 border-t border-dashed border-gray-200 lg:block"
          ></div>
        </div>
        <h3 class="mb-2 text-base font-bold text-gray-950">Copy the source</h3>
        <p class="text-sm leading-6 text-gray-500">
          Click Copy to grab the Prettier-formatted HTML. The code is
          framework-agnostic — use it in any Astro, React, or plain HTML
          project.
        </p>
      </div>
      <div class="relative">
        <div class="mb-5 flex items-center gap-3">
          <div
            class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-violet-600 text-xs font-bold text-white"
          >
            4
          </div>
        </div>
        <h3 class="mb-2 text-base font-bold text-gray-950">
          Paste and customise
        </h3>
        <p class="text-sm leading-6 text-gray-500">
          Drop the block into your project. Every class is plain Tailwind — swap
          colors, adjust spacing, or restructure the markup however you like.
        </p>
      </div>
    </div>
  </div>
</section>

How To Alternating

howto

Open

How it works

Three steps to ship.

Browse the gallery

Explore blocks by category — Hero, Features, Pricing, CTA, and more. Each category ships with multiple variants so you always find the right aesthetic for your project.

Hero Features Pricing CTA Footer FAQ

Preview at every breakpoint

Switch between the live preview and the Code tab. Drag the resize handle or snap to Mobile, Tablet, or Desktop presets to see exactly how a block behaves before you commit to it.

Mobile Tablet Desktop

Copy, paste, and own it

One click copies the Prettier-formatted source. Every block is a single self-contained file with no dependencies — paste it into your project and it's yours to customise forever.

// No imports. No setup.

Your content.

</section>

<section class="bg-gray-50 px-6 py-24 lg:px-8">
  <div class="mx-auto max-w-5xl">
    <div class="mb-16 max-w-xl">
      <p
        class="mb-3 text-xs font-semibold uppercase tracking-widest text-violet-600"
      >
        How it works
      </p>
      <h2
        class="text-4xl font-extrabold tracking-tight text-gray-950 sm:text-5xl"
      >
        Three steps to ship.
      </h2>
    </div>
    <div class="space-y-6">
      <div
        class="grid grid-cols-1 items-center gap-8 overflow-hidden rounded-3xl border border-gray-100 bg-white p-10 sm:grid-cols-2"
      >
        <div>
          <p class="mb-4 font-mono text-4xl font-bold text-gray-100">01</p>
          <h3 class="mb-3 text-xl font-bold tracking-tight text-gray-950">
            Browse the gallery
          </h3>
          <p class="text-sm leading-7 text-gray-500">
            Explore blocks by category — Hero, Features, Pricing, CTA, and more.
            Each category ships with multiple variants so you always find the
            right aesthetic for your project.
          </p>
        </div>
        <div
          class="flex items-center justify-center rounded-2xl bg-gray-50 p-8"
        >
          <div class="flex flex-wrap justify-center gap-2">
            <span
              class="rounded-full px-3 py-1.5 text-xs font-semibold bg-violet-600 text-white"
            >
              Hero </span
            ><span
              class="rounded-full px-3 py-1.5 text-xs font-semibold bg-white text-gray-500 ring-1 ring-gray-200"
            >
              Features </span
            ><span
              class="rounded-full px-3 py-1.5 text-xs font-semibold bg-white text-gray-500 ring-1 ring-gray-200"
            >
              Pricing </span
            ><span
              class="rounded-full px-3 py-1.5 text-xs font-semibold bg-white text-gray-500 ring-1 ring-gray-200"
            >
              CTA </span
            ><span
              class="rounded-full px-3 py-1.5 text-xs font-semibold bg-white text-gray-500 ring-1 ring-gray-200"
            >
              Footer </span
            ><span
              class="rounded-full px-3 py-1.5 text-xs font-semibold bg-white text-gray-500 ring-1 ring-gray-200"
            >
              FAQ
            </span>
          </div>
        </div>
      </div>
      <div
        class="grid grid-cols-1 items-center gap-8 overflow-hidden rounded-3xl border border-gray-100 bg-white p-10 sm:grid-cols-2 sm:[&#38;>*:first-child]:order-last"
      >
        <div>
          <p class="mb-4 font-mono text-4xl font-bold text-gray-100">02</p>
          <h3 class="mb-3 text-xl font-bold tracking-tight text-gray-950">
            Preview at every breakpoint
          </h3>
          <p class="text-sm leading-7 text-gray-500">
            Switch between the live preview and the Code tab. Drag the resize
            handle or snap to Mobile, Tablet, or Desktop presets to see exactly
            how a block behaves before you commit to it.
          </p>
        </div>
        <div
          class="flex items-center justify-center rounded-2xl bg-gray-50 p-8"
        >
          <div class="flex flex-wrap justify-center gap-2">
            <span
              class="rounded-full px-3 py-1.5 text-xs font-semibold bg-violet-600 text-white"
            >
              Mobile </span
            ><span
              class="rounded-full px-3 py-1.5 text-xs font-semibold bg-white text-gray-500 ring-1 ring-gray-200"
            >
              Tablet </span
            ><span
              class="rounded-full px-3 py-1.5 text-xs font-semibold bg-white text-gray-500 ring-1 ring-gray-200"
            >
              Desktop
            </span>
          </div>
        </div>
      </div>
      <div
        class="grid grid-cols-1 items-center gap-8 overflow-hidden rounded-3xl border border-gray-100 bg-white p-10 sm:grid-cols-2"
      >
        <div>
          <p class="mb-4 font-mono text-4xl font-bold text-gray-100">03</p>
          <h3 class="mb-3 text-xl font-bold tracking-tight text-gray-950">
            Copy, paste, and own it
          </h3>
          <p class="text-sm leading-7 text-gray-500">
            One click copies the Prettier-formatted source. Every block is a
            single self-contained file with no dependencies — paste it into your
            project and it&#39;s yours to customise forever.
          </p>
        </div>
        <div
          class="flex items-center justify-center rounded-2xl bg-gray-50 p-8"
        >
          <div
            class="w-full overflow-hidden rounded-xl bg-gray-950 font-mono text-xs"
          >
            <div
              class="flex items-center gap-1.5 border-b border-white/10 px-4 py-2.5"
            >
              <span class="h-2 w-2 rounded-full bg-red-500/50"></span>
              <span class="h-2 w-2 rounded-full bg-amber-400/50"></span>
              <span class="h-2 w-2 rounded-full bg-emerald-400/50"></span>
            </div>
            <div class="px-4 py-3 leading-6">
              <p class="text-gray-600">// No imports. No setup.</p>
              <p class="text-sky-400">
                &lt;<span class="text-sky-400">section</span>
                <span class="text-amber-300">class</span
                ><span class="text-gray-500">=</span
                ><span class="text-emerald-300">"..."</span>&gt;
              </p>
              <p class="pl-4 text-white">Your content.</p>
              <p class="text-sky-400">
                &lt;/<span class="text-sky-400">section</span>&gt;
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

How To Minimal

howto

Open

How it works

Up and running in minutes.

1

Browse the gallery

Explore blocks by category. Each ships with multiple variants — bold, minimal, bento.
2

Preview at every breakpoint

Drag the resize handle or use presets to check Mobile, Tablet, and Desktop before you commit.
3

Copy the source

One click copies Prettier-formatted HTML. Framework-agnostic — works anywhere.
4

Paste and own it

Drop it in your project and customise freely. Plain Tailwind classes, no abstractions.

<section class="border-t border-gray-100 bg-white px-6 py-24 lg:px-8">
  <div class="mx-auto max-w-3xl">
    <div class="mb-12">
      <p
        class="mb-2 text-xs font-semibold uppercase tracking-widest text-gray-400"
      >
        How it works
      </p>
      <h2 class="text-3xl font-bold tracking-tight text-gray-950">
        Up and running in minutes.
      </h2>
    </div>
    <ol class="space-y-0">
      <li class="grid grid-cols-[2rem_1fr] gap-x-5">
        <!-- Timeline spine -->
        <div class="flex flex-col items-center">
          <div
            class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-950 text-xs font-bold text-white"
          >
            1
          </div>
          <div class="mt-1 w-px flex-1 bg-gray-100"></div>
        </div>
        <!-- Content -->
        <div class="pb-10">
          <p class="mb-1 text-sm font-semibold text-gray-950">
            Browse the gallery
          </p>
          <p class="text-sm leading-6 text-gray-500">
            Explore blocks by category. Each ships with multiple variants —
            bold, minimal, bento.
          </p>
        </div>
      </li>
      <li class="grid grid-cols-[2rem_1fr] gap-x-5">
        <!-- Timeline spine -->
        <div class="flex flex-col items-center">
          <div
            class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-950 text-xs font-bold text-white"
          >
            2
          </div>
          <div class="mt-1 w-px flex-1 bg-gray-100"></div>
        </div>
        <!-- Content -->
        <div class="pb-10">
          <p class="mb-1 text-sm font-semibold text-gray-950">
            Preview at every breakpoint
          </p>
          <p class="text-sm leading-6 text-gray-500">
            Drag the resize handle or use presets to check Mobile, Tablet, and
            Desktop before you commit.
          </p>
        </div>
      </li>
      <li class="grid grid-cols-[2rem_1fr] gap-x-5">
        <!-- Timeline spine -->
        <div class="flex flex-col items-center">
          <div
            class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-950 text-xs font-bold text-white"
          >
            3
          </div>
          <div class="mt-1 w-px flex-1 bg-gray-100"></div>
        </div>
        <!-- Content -->
        <div class="pb-10">
          <p class="mb-1 text-sm font-semibold text-gray-950">
            Copy the source
          </p>
          <p class="text-sm leading-6 text-gray-500">
            One click copies Prettier-formatted HTML. Framework-agnostic — works
            anywhere.
          </p>
        </div>
      </li>
      <li class="grid grid-cols-[2rem_1fr] gap-x-5">
        <!-- Timeline spine -->
        <div class="flex flex-col items-center">
          <div
            class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-950 text-xs font-bold text-white"
          >
            4
          </div>
        </div>
        <!-- Content -->
        <div class="pb-10 pb-0">
          <p class="mb-1 text-sm font-semibold text-gray-950">
            Paste and own it
          </p>
          <p class="text-sm leading-6 text-gray-500">
            Drop it in your project and customise freely. Plain Tailwind
            classes, no abstractions.
          </p>
        </div>
      </li>
    </ol>
  </div>
</section>