A landing page without a strong call-to-action is a brochure. It informs, but it doesn't convert. The CTA section is where you ask visitors to do the thing — sign up, start a trial, book a demo, subscribe. And the design of that section directly affects whether they do it.
This guide covers five CTA patterns in React with Tailwind CSS that consistently outperform the generic "Sign up now" banner.
1. Full-Width CTA with Gradient Background
The most common high-impact CTA: a full-width band with a bold headline, short description, and a single button. The gradient background creates visual separation from the content above and below.
function FullWidthCTA() {
return (
<section className="bg-gradient-to-br from-neutral-900 to-neutral-800 dark:from-neutral-50 dark:to-neutral-200">
<div className="mx-auto max-w-4xl px-6 py-24 text-center">
<h2 className="text-3xl font-bold tracking-tight text-white dark:text-neutral-900 sm:text-4xl">
Start building faster today
</h2>
<p className="mt-4 text-lg text-neutral-300 dark:text-neutral-600">
Join 10,000+ developers who ship production-ready UIs in hours, not weeks.
</p>
<div className="mt-8 flex justify-center gap-4">
<a
href="/signup"
className="rounded-full bg-white px-8 py-3 text-sm font-semibold text-neutral-900 hover:bg-neutral-100 transition-colors"
>
Get started free
</a>
<a
href="/demo"
className="rounded-full border border-neutral-600 px-8 py-3 text-sm font-semibold text-white hover:border-neutral-400 transition-colors"
>
Book a demo
</a>
</div>
</div>
</section>
);
}
Two buttons beat one button. The primary action ("Get started free") is high-contrast and obvious. The secondary action ("Book a demo") catches people who aren't ready to commit but are interested enough to learn more. The ghost button style clearly communicates its secondary role.
Why CTA Design Matters
Conversion rate optimization research consistently shows three things about CTAs:
Contrast wins. The CTA section should look visually different from everything around it. A dark section between light sections (or vice versa) creates a natural stopping point that draws the eye.
Specificity converts. "Get started free" outperforms "Sign up". "Ship your first page in 5 minutes" outperforms "Get started". The more specific the promise, the higher the click-through rate.
Reduce friction language. "No credit card required" and "Free forever for small teams" directly address the hesitation the visitor is feeling at that exact moment.
2. Split CTA (Text + Image)
A two-column layout where the left side has the headline and button, and the right side shows a product screenshot, illustration, or video preview. This works well for product-focused CTAs:
The layout uses grid md:grid-cols-2 items-center gap-12. On mobile, the image stacks below the text. On desktop, they sit side by side.
The image column should show the product in context — a dashboard, an editor, a design tool. Abstract illustrations are less effective because they don't help the visitor imagine using the product.
3. CTA with Social Proof
Adding social proof directly inside the CTA section is one of the highest-leverage changes you can make. Testimonial quotes, user counts, or logo bars next to the signup button reduce perceived risk.
The pattern: headline and button on top, then a thin separator, then a row of avatars with a label like "Trusted by 8,000+ teams" or a strip of customer logos.
function CTAWithSocialProof() {
return (
<section className="mx-auto max-w-4xl px-6 py-24 text-center">
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
Ready to launch your next project?
</h2>
<p className="mt-4 text-lg text-neutral-600 dark:text-neutral-400">
Copy-paste production components. Customize in minutes.
</p>
<a
href="/signup"
className="mt-8 inline-flex rounded-full bg-neutral-900 px-8 py-3 text-sm font-semibold text-white hover:bg-neutral-700 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-200 transition-colors"
>
Start building
</a>
<div className="mt-10 flex items-center justify-center gap-3">
<div className="flex -space-x-2">
{[1, 2, 3, 4, 5].map((i) => (
<img
key={i}
src={`/avatars/${i}.jpg`}
alt=""
className="h-8 w-8 rounded-full border-2 border-white dark:border-neutral-900"
/>
))}
</div>
<p className="text-sm text-neutral-500">
Trusted by <strong className="text-neutral-900 dark:text-white">8,000+</strong> developers
</p>
</div>
</section>
);
}
The overlapping avatar stack (-space-x-2) creates a sense of community. Real photos outperform placeholder icons. If you don't have real user photos, use initials in colored circles instead.
4. Floating / Sticky CTA
For long-form pages (blog posts, case studies, documentation), a sticky CTA bar at the bottom of the viewport catches visitors who've read enough to be convinced but don't want to scroll back to the top.
Implement it with fixed bottom-0 left-0 right-0 and a backdrop-blur-md background. Show it only after the user scrolls past a certain point using an IntersectionObserver:
"use client";
import { useEffect, useState } from "react";
function StickyBar() {
const [visible, setVisible] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => setVisible(!entry.isIntersecting),
{ threshold: 0 }
);
const hero = document.getElementById("hero");
if (hero) observer.observe(hero);
return () => observer.disconnect();
}, []);
if (!visible) return null;
return (
<div className="fixed bottom-0 inset-x-0 z-50 border-t bg-white/80 backdrop-blur-md dark:bg-neutral-950/80 dark:border-neutral-800">
<div className="mx-auto max-w-7xl flex items-center justify-between px-6 py-3">
<p className="text-sm font-medium">Ready to build faster?</p>
<a
href="/signup"
className="rounded-full bg-neutral-900 px-6 py-2 text-sm font-semibold text-white dark:bg-white dark:text-neutral-900"
>
Get started
</a>
</div>
</div>
);
}
The IntersectionObserver watches the hero section. Once the hero scrolls out of view, the sticky bar appears. This avoids showing the CTA when the visitor has just arrived and hasn't seen any content yet.
5. Newsletter CTA
Not every CTA is a signup. Newsletter CTAs collect email addresses in exchange for content — updates, tips, early access. The design is simpler: a headline, a one-line pitch, and an email input with a submit button.
The input and button should be on the same line on desktop (flex gap-2) and stack on mobile. The button label should say what happens next: "Subscribe" is generic; "Get weekly tips" is specific.
Add a privacy reassurance below the input: "No spam, ever. Unsubscribe anytime." This single line measurably improves conversion rates on newsletter forms.
Placement Strategy
The CTA section should appear at least twice on a landing page:
- After the hero: for visitors who already know what they want
- After the social proof or pricing section: for visitors who needed more convincing
Don't put a CTA after every section — it creates decision fatigue and feels aggressive. Two to three CTAs per page is the sweet spot.
Color and Contrast
The CTA button should be the highest-contrast element on the page. If your site uses neutral tones, make the CTA button your brand accent color. If your site is already colorful, use black or white for the CTA to make it stand out.
Never use a ghost button for the primary CTA. Ghost buttons are for secondary actions. The primary action needs a solid fill that screams "click me."
Get Pre-Built CTA Sections
The Incubator CTA catalog has 15+ CTA section variants — full-width, split, with social proof, sticky bars, newsletter, and more — all built in React with Tailwind CSS and ready to customize.
Check the full component library for every section from navbars to footers.