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.
<section class="px-6 py-24">
<div class="card max-w-4xl mx-auto p-6 md:p-16 items-center text-center border-subtle rounded-3xl">
<span class="badge badge-subtle gap-2 mb-10">
<div class="size-1.75 rounded-full bg-success animate-pulse"></div>
<span class="uppercase text-muted">Next Gen Interface</span>
</span>
<h2 class="text-4xl md:text-6xl font-extrabold tracking-tight text-default mb-6">
Your workflow,
<br />
<span class="dark:text-transparent bg-clip-text bg-linear-to-b from-dark to-dark/40 dark:from-white dark:to-white/40">fully autonomous.</span>
</h2>
<p class="text-base 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.</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-3 mb-6 w-full">
<button class="btn btn-neutral sm:btn-lg dark:bg-white dark:text-black w-full sm:w-auto">Start Building</button>
<button class="btn btn-subtle-neutral sm:btn-lg px-6 w-full sm:w-auto">View Docs</button>
</div>
<p class="text-sm text-muted">No credit card required · Setup in under 2 minutes</p>
</div>
</section>
<section class="px-6 py-24">
<div class="max-w-6xl mx-auto grid items-center lg:grid-cols-2 gap-12 lg:gap-20">
<!-- left content -->
<div class="space-y-8">
<span class="badge badge-subtle gap-2">
<span class="relative flex size-2">
<span class="absolute inline-flex size-full rounded-full bg-primary opacity-75 animate-ping"></span>
<span class="inline-flex size-2 rounded-full bg-primary"></span>
</span>
<span class="uppercase text-muted">New: v1.0 is live</span>
</span>
<h2 class="text-4xl md:text-6xl font-extrabold tracking-tight">
Build faster with
<br />
<span class="bg-clip-text text-transparent bg-linear-to-r from-secondary to-primary font-extrabold">smart logic.</span>
</h2>
<p class="md:text-lg text-muted max-w-md">Ship production-ready interfaces with composable UI blocks designed for speed, scalability, and real-world workflows.</p>
<div class="flex items-center gap-3">
<a href="#" class="btn btn-primary md:btn-lg font-semibold">Explore Library</a>
<a href="#" class="btn btn-subtle-neutral md:btn-lg">View Live Demo</a>
</div>
<hr class="border-subtle" />
<div class="flex items-center gap-8">
<div class="flex items-center gap-2 text-sm font-medium text-muted">
<svg class="size-5 text-primary" fill="currentColor" viewBox="0 0 20 20"><path d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z"></path></svg>
Instant setup
</div>
<div class="flex items-center gap-2 text-sm font-medium text-muted">
<svg class="size-5 text-secondary" fill="currentColor" viewBox="0 0 20 20"><path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"></path></svg>
120+ Blocks
</div>
</div>
</div>
<!-- right content -->
<div class="relative aspect-4/3 max-w-140">
<div class="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" class="size-full object-cover transition duration-700 hover:scale-105" /></div>
<div class="card hidden sm:block absolute -top-6 -right-6 border-0 dark:border border-subtle px-4 py-3 text-sm shadow-xl rounded-xl">
<h6 class="text-default text-sm mb-0">2x Faster</h6>
<span class="text-muted text-xs">Development speed</span>
</div>
<div class="absolute bottom-5 left-5 badge badge-lg badge-subtle rounded-lg border-0 py-2.5">
<svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 32 32"><path fill="#f9c23c" d="M10.52 7.052a1.17 1.17 0 0 1-.639-.636L8.93 4.257c-.178-.343-.69-.343-.858 0l-.952 2.16a1.28 1.28 0 0 1-.638.635l-1.214.524a.462.462 0 0 0 0 .838l1.214.524c.293.121.523.353.638.636l.952 2.169c.178.343.69.343.858 0l.952-2.17c.126-.282.356-.504.638-.635l1.214-.524a.462.462 0 0 0 0-.838zm15.054 6.503a3.73 3.73 0 0 1-1.922-1.977L20.79 4.81a1.432 1.432 0 0 0-2.58 0l-2.863 6.768a3.8 3.8 0 0 1-1.921 1.977l-3.622 1.64c-1.072.53-1.072 2.08 0 2.61l3.622 1.64a3.74 3.74 0 0 1 1.922 1.977l2.862 6.768a1.432 1.432 0 0 0 2.58 0l2.863-6.768a3.8 3.8 0 0 1 1.921-1.977l3.622-1.64c1.072-.53 1.072-2.08 0-2.61zM8.281 20.33c.16.392.454.696.822.872l1.55.725a.646.646 0 0 1 0 1.146l-1.55.725c-.368.176-.661.49-.822.872l-1.228 2.977a.61.61 0 0 1-1.106 0L4.72 24.67a1.66 1.66 0 0 0-.822-.872l-1.55-.725a.646.646 0 0 1 0-1.146l1.55-.725c.368-.176.661-.49.822-.872l1.228-2.977a.61.61 0 0 1 1.106 0z"></path></svg>
New Components Added
</div>
</div>
</div>
</section>
<section class="px-6 py-24 mx-auto max-w-xl lg:max-w-6xl">
<div class="text-center mb-16">
<h2 class="text-4xl md:text-5xl tracking-tighter mb-4">
How do you want to
<span class="text-primary">get started?</span>
</h2>
<p class="text-lg text-muted max-w-2xl mx-auto font-medium">Choose the path that fits your workflow—we’ve got you covered with tools for every stage of your project.</p>
</div>
<div class="grid lg:grid-cols-3 gap-8">
<!-- card 01 -->
<div class="card group p-8 bg-default border-subtle rounded-3xl">
<div class="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">
<svg class="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
</div>
<h3 class="text-xl text-default mb-3">Start from scratch</h3>
<p class="text-sm font-medium text-muted mb-6">Build everything your way with full flexibility and our core API suite.</p>
<a href="#" class="btn btn-text-neutral px-0 self-start bg-transparent text-sm font-bold uppercase tracking-wide group/link">
Get started
<svg class="ms-2 size-4 transition-transform group-hover/link:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
</a>
</div>
<!-- card 02 -->
<div class="card group p-8 bg-primary border-transparent rounded-3xl">
<div class="flex items-start justify-between mb-6">
<div class="size-12 flex items-center justify-center rounded-2xl bg-white/10 text-white">
<svg class="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</div>
<span class="badge badge-subtle-primary uppercase text-white/80 border-white/60">Recommended</span>
</div>
<h3 class="text-xl text-white mb-3">Use templates</h3>
<p class="text-sm text-white/80 mb-6">Jumpstart your project with over 200+ ready-made, high-performance designs.</p>
<a href="#" class="btn text-white px-0 self-start bg-transparent text-sm font-bold uppercase tracking-wide group/link">
Browse templates
<svg class="ms-2 size-4 transition-transform group-hover/link:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
</a>
</div>
<!-- card 03 -->
<div class="card group p-8 bg-default border-subtle rounded-3xl">
<div class="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">
<svg class="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
</div>
<h3 class="text-xl text-default mb-3">Hire experts</h3>
<p class="text-sm font-medium text-muted mb-6">Collaborate with top-tier professionals to build your custom solution today.</p>
<a href="#" class="btn btn-text-neutral px-0 self-start bg-transparent text-sm font-bold uppercase tracking-wide group/link">
Find experts
<svg class="ms-2 size-4 transition-transform group-hover/link:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
</a>
</div>
</div>
</section>
<div class="px-6 py-20">
<div class="card max-w-6xl mx-auto p-8 md:p-14 border-subtle lg:flex-row items-start justify-between gap-12 rounded-2xl">
<div class="flex-1">
<span class="badge badge-subtle gap-2 mb-8">
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
<span class="uppercase">v1.0 is live</span>
</span>
<h2 class="text-4xl md:text-5xl font-black tracking-tight text-default mb-6">
Build faster.
<span class="text-subtle">Deploy sooner.</span>
<br />
Scale
<span class="underline decoration-dark/15 dark:decoration-white/15 grayscale decoration-4 underline-offset-4">everywhere.</span>
</h2>
<p class="text-lg text-muted max-w-lg leading-relaxed">The modern standard for cloud orchestration. Manage your entire stack from a single, unified command center.</p>
</div>
<div class="card border-subtle rounded-xl w-full max-w-md p-4 sm:p-8">
<button class="btn btn-neutral btn-lg dark:bg-white dark:text-black w-full py-3 mb-4">Get Started — It's Free</button>
<button class="btn btn-subtle-neutral btn-lg w-full py-3">Talk to Sales</button>
<hr class="border-subtle my-8" />
<div class="flex justify-between items-center text-center">
<div>
<p class="text-2xl font-bold text-default">99.9%</p>
<p class="text-xs uppercase text-muted font-medium">Uptime</p>
</div>
<div class="vr h-8 self-center"></div>
<div>
<p class="text-2xl font-bold text-default">24/7</p>
<p class="text-xs uppercase text-muted font-medium">Support</p>
</div>
<div class="vr h-8 self-center"></div>
<div>
<p class="text-2xl font-bold text-default">50M+</p>
<p class="text-xs uppercase text-muted font-medium">Requests</p>
</div>
</div>
</div>
</div>
</div>
<section class="p-3">
<div class="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 class="flex flex-col items-center lg:items-start text-center lg:text-left space-y-2">
<span class="badge badge-subtle-primary uppercase mb-6">Limited Protocol</span>
<h2 class="text-4xl md:text-5xl font-black tracking-tighter mb-3">
Don’t miss
<span class="text-primary italic">the surge.</span>
</h2>
<p class="text-base max-w-md font-medium">Upgrade within the next 24 hours to secure 40% off all infrastructure plans.</p>
</div>
<div class="flex items-center gap-4">
<a href="#" class="btn btn-primary sm:btn-lg sm:w-50 shrink-0">Upgrade now</a>
<a href="#" class="btn btn-outline-primary sm:btn-lg sm:w-50 shrink-0">See pricing</a>
</div>
</div>
</section>