FreeBlocks

CTA Sections

Use this near the end of landing pages, case studies, product pages, or service pages when the user is ready for a single clear next action.

ReactTailwind CSSCTABlocks

Launch ready

Get realistic with your product today.

A clean CTA section with proof, action, and enough restraint to fit inside serious product pages.

Overview

A minimalist CTA block with badge, headline, short proof copy, and action button.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

No additional packages required after Tailwind CSS setup.

Usage

tsx

<CtaSections />

CTA Sections.tsx

tsx

export function CtaSections() {
  return (
    <section className="relative overflow-hidden rounded-xl border border-white/10 bg-black p-8 text-white">
      <div className="absolute right-8 top-8 h-10 w-10 rounded-full bg-amber-300 text-center text-xl leading-10 text-black">
        *
      </div>
      <div className="flex min-h-[220px] items-center justify-between gap-6">
        <div className="max-w-sm">
          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-lime-300">
            Launch ready
          </p>
          <h3 className="mt-2 text-2xl font-black">
            Get realistic with your product today.
          </h3>
          <p className="mt-3 text-xs leading-relaxed text-zinc-400">
            A clean CTA section with proof, action, and enough restraint to fit inside serious product pages.
          </p>
        </div>
        <button className="rounded-full bg-lime-300 px-4 py-2 text-xs font-bold text-zinc-950">
          Book a call
        </button>
      </div>
    </section>
  );
}