Explore Tailwind CSS call-to-action section examples to encourage users to take the next step. These blocks include a variety of layouts and styles to help you create clear and effective actions across your pages.
"use client";
import { Badge, Button, Card, Text } from "@hummingbirdui/react";
export default function Cta1() {
return (
<section className="px-6 py-24">
<Card className="max-w-4xl mx-auto p-6 md:p-16 items-center text-center border-subtle rounded-3xl">
<Badge variant="subtle" color="neutral" className="gap-2 mb-10">
<span className="size-1.75 rounded-full bg-success animate-pulse" />
<span className="uppercase text-muted">Next Gen Interface</span>
</Badge>
<Text
as="h2"
size="4xl"
fontWeight="extrabold"
className="md:text-6xl tracking-tight text-default mb-6"
>
Your workflow,
<br />
<span className="dark:text-transparent bg-clip-text bg-linear-to-b from-neutral to-neutral/40 dark:from-white dark:to-white/40">
fully autonomous.
</span>
</Text>
<Text
size="base"
className="md:text-lg text-muted leading-relaxed max-w-xl mb-10"
>
The first orchestration engine that learns from your deployments. Ship
globally in seconds — not minutes.
</Text>
<div className="flex flex-col sm:flex-row items-center justify-center gap-3 mb-6 w-full">
<Button
color="neutral"
className="sm:btn-lg dark:bg-white dark:text-black w-full sm:w-auto"
>
Start Building
</Button>
<Button
variant="subtle"
color="neutral"
className="sm:btn-lg px-6 w-full sm:w-auto"
>
View Docs
</Button>
</div>
<Text size="sm" className="text-muted">
No credit card required · Setup in under 2 minutes
</Text>
</Card>
</section>
);
}"use client";
import { GalleryVerticalEnd, Sparkles, Zap } from "lucide-react";
import { Badge, Button, Card, Divider, Text } from "@hummingbirdui/react";
export default function Cta2() {
return (
<section className="px-6 py-24">
<div className="max-w-6xl mx-auto grid items-center lg:grid-cols-2 gap-12 lg:gap-20">
{/* left content */}
<div className="space-y-8">
<Badge variant="subtle" color="neutral" className="gap-2">
<span className="relative flex size-2">
<span className="absolute inline-flex size-full rounded-full bg-primary opacity-75 animate-ping" />
<span className="inline-flex size-2 rounded-full bg-primary" />
</span>
<span className="uppercase text-muted">New: v1.0 is live</span>
</Badge>
<Text
as="h2"
size="4xl"
fontWeight="extrabold"
className="md:text-6xl tracking-tight"
>
Build faster with
<br />
<span className="bg-clip-text text-transparent bg-linear-to-r from-secondary to-primary font-extrabold">
smart logic.
</span>
</Text>
<Text className="md:text-lg text-muted max-w-md">
Ship production-ready interfaces with composable UI blocks designed
for speed, scalability, and real-world workflows.
</Text>
<div className="flex items-center gap-3">
<Button asChild className="md:btn-lg font-semibold">
<a href="#">Explore Library</a>
</Button>
<Button
asChild
variant="subtle"
color="neutral"
className="md:btn-lg"
>
<a href="#">View Live Demo</a>
</Button>
</div>
<Divider className="border-subtle" />
<div className="flex items-center gap-8">
<div className="flex items-center gap-2 text-sm font-medium text-muted">
<Zap className="size-5 text-primary" fill="currentColor" />
Instant setup
</div>
<div className="flex items-center gap-2 text-sm font-medium text-muted">
<GalleryVerticalEnd
className="size-5 text-secondary"
fill="currentColor"
/>
120+ Blocks
</div>
</div>
</div>
{/* right content */}
<div className="relative aspect-4/3 max-w-140">
<div className="size-full rounded-xl overflow-hidden">
<img
src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
className="size-full object-cover transition duration-700 hover:scale-105"
/>
</div>
<Card className="hidden sm:block absolute -top-6 -right-6 border-0 dark:border border-subtle px-4 py-3 text-sm shadow-xl rounded-xl">
<Text as="h6" size="sm" className="text-default mb-0">
2x Faster
</Text>
<span className="text-muted text-xs">Development speed</span>
</Card>
<Badge
variant="subtle"
color="neutral"
size="lg"
className="absolute bottom-5 left-5 rounded-lg border-0 py-2.5"
>
<Sparkles className="size-4 text-[#f9c23c]" fill="currentColor" />
New Components Added
</Badge>
</div>
</div>
</section>
);
}"use client";
import { ArrowRight, Plus, Users, Zap } from "lucide-react";
import { Badge, Button, Card, Text } from "@hummingbirdui/react";
export default function Cta3() {
return (
<section className="px-6 py-24 mx-auto max-w-xl lg:max-w-6xl">
<div className="text-center mb-16">
<Text as="h2" size="4xl" className="md:text-5xl tracking-tighter mb-4">
How do you want to <span className="text-primary">get started?</span>
</Text>
<Text
size="lg"
fontWeight="medium"
className="text-muted max-w-2xl mx-auto"
>
Choose the path that fits your workflow—we’ve got you covered with
tools for every stage of your project.
</Text>
</div>
<div className="grid lg:grid-cols-3 gap-8">
{/* card 01 */}
<Card className="group p-8 bg-default border-subtle rounded-3xl">
<div className="size-12 mb-6 flex items-center justify-center rounded-2xl bg-muted text-muted group-hover:bg-primary group-hover:text-white transition-colors duration-300">
<Plus className="size-6" />
</div>
<Text as="h3" size="xl" className="text-default mb-3">
Start from scratch
</Text>
<Text size="sm" fontWeight="medium" className="text-muted mb-6">
Build everything your way with full flexibility and our core API
suite.
</Text>
<Button
asChild
variant="text"
color="neutral"
className="px-0 self-start bg-transparent text-sm font-bold uppercase tracking-wide group/link"
>
<a href="#">
Get started
<ArrowRight className="ms-2 size-4 transition-transform group-hover/link:translate-x-1" />
</a>
</Button>
</Card>
{/* card 02 */}
<Card className="group p-8 bg-primary border-transparent rounded-3xl">
<div className="flex items-start justify-between mb-6">
<div className="size-12 flex items-center justify-center rounded-2xl bg-white/10 text-white">
<Zap className="size-6" />
</div>
<Badge
variant="subtle"
className="uppercase text-white/80 border-white/60"
>
Recommended
</Badge>
</div>
<Text as="h3" size="xl" className="text-white mb-3">
Use templates
</Text>
<Text size="sm" className="text-white/80 mb-6">
Jumpstart your project with over 200+ ready-made, high-performance
designs.
</Text>
<Button
asChild
color={null}
className="text-white px-0 self-start bg-transparent text-sm font-bold uppercase tracking-wide group/link"
>
<a href="#">
Browse templates
<ArrowRight className="ms-2 size-4 transition-transform group-hover/link:translate-x-1" />
</a>
</Button>
</Card>
{/* card 03 */}
<Card className="group p-8 bg-default border-subtle rounded-3xl">
<div className="size-12 mb-6 flex items-center justify-center rounded-2xl bg-muted text-muted group-hover:bg-primary group-hover:text-white transition-colors duration-300">
<Users className="size-6" />
</div>
<Text as="h3" size="xl" className="text-default mb-3">
Hire experts
</Text>
<Text size="sm" fontWeight="medium" className="text-muted mb-6">
Collaborate with top-tier professionals to build your custom
solution today.
</Text>
<Button
asChild
variant="text"
color="neutral"
className="px-0 self-start bg-transparent text-sm font-bold uppercase tracking-wide group/link"
>
<a href="#">
Find experts
<ArrowRight className="ms-2 size-4 transition-transform group-hover/link:translate-x-1" />
</a>
</Button>
</Card>
</div>
</section>
);
}"use client";
import { Zap } from "lucide-react";
import { Badge, Button, Card, Divider, Text } from "@hummingbirdui/react";
const stats = [
{ value: "99.9%", label: "Uptime" },
{ value: "24/7", label: "Support" },
{ value: "50M+", label: "Requests" },
];
export default function Cta4() {
return (
<div className="px-6 py-20">
<Card className="max-w-6xl mx-auto p-8 md:p-14 border-subtle lg:flex-row items-start justify-between gap-12 rounded-2xl">
<div className="flex-1">
<Badge variant="subtle" color="neutral" className="gap-2 mb-8">
<Zap className="size-4" />
<span className="uppercase">v1.0 is live</span>
</Badge>
<Text
as="h2"
size="4xl"
fontWeight="black"
className="md:text-5xl tracking-tight text-default mb-6"
>
Build faster. <span className="text-subtle">Deploy sooner.</span>
<br />
Scale{" "}
<span className="underline decoration-neutral/15 dark:decoration-white/15 grayscale decoration-4 underline-offset-4">
everywhere.
</span>
</Text>
<Text size="lg" className="text-muted max-w-lg leading-relaxed">
The modern standard for cloud orchestration. Manage your entire
stack from a single, unified command center.
</Text>
</div>
<Card className="border-subtle rounded-xl w-full max-w-md p-4 sm:p-8">
<Button
color="neutral"
size="lg"
className="dark:bg-white dark:text-black w-full py-3 mb-4"
>
Get Started — It's Free
</Button>
<Button
variant="subtle"
color="neutral"
size="lg"
className="w-full py-3"
>
Talk to Sales
</Button>
<Divider className="border-subtle my-8" />
<div className="flex justify-between items-center text-center">
{stats.map((stat, index) => (
<div key={stat.label} className="contents">
{index > 0 && (
<Divider orientation="vertical" className="h-8 self-center" />
)}
<div>
<Text size="2xl" fontWeight="bold" className="text-default">
{stat.value}
</Text>
<Text
size="xs"
fontWeight="medium"
className="uppercase text-muted"
>
{stat.label}
</Text>
</div>
</div>
))}
</div>
</Card>
</Card>
</div>
);
}"use client";
import { Badge, Button, Text } from "@hummingbirdui/react";
export default function Cta5() {
return (
<section className="p-3">
<div className="px-6 py-12 flex flex-col lg:flex-row items-center justify-between gap-8 bg-linear-to-b from-subtle via-primary-lighter to-primary-light/40 max-w-7xl mx-auto rounded-xl">
<div className="flex flex-col items-center lg:items-start text-center lg:text-left space-y-2">
<Badge variant="subtle" className="uppercase mb-6">
Limited Protocol
</Badge>
<Text
as="h2"
size="4xl"
fontWeight="black"
className="md:text-5xl tracking-tighter mb-3"
>
Don’t miss <span className="text-primary italic">the surge.</span>
</Text>
<Text size="base" fontWeight="medium" className="max-w-md">
Upgrade within the next 24 hours to secure 40% off all
infrastructure plans.
</Text>
</div>
<div className="flex items-center gap-4">
<Button asChild className="sm:btn-lg sm:w-50 shrink-0">
<a href="#">Upgrade now</a>
</Button>
<Button
asChild
variant="outline"
className="sm:btn-lg sm:w-50 shrink-0"
>
<a href="#">See pricing</a>
</Button>
</div>
</div>
</section>
);
}