sectioncta-bannerbeginner
CTA Banner
A bold call-to-action banner with gradient background and centered messaging.
Preview
Ready to Get Started?
Join thousands of developers building with our tools.
<section class="bg-gradient-to-r from-indigo-600 to-purple-600 py-16 px-4">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Ready to Get Started?</h2>
<p class="text-indigo-100 text-lg mb-8">Join thousands of developers building with our tools.</p>
<div class="flex justify-center gap-4 flex-wrap">
<a href="#" class="px-8 py-3 bg-white text-indigo-700 font-bold rounded-lg hover:shadow-lg transition-all">Start Free Trial</a>
<a href="#" class="px-8 py-3 border-2 border-white text-white font-bold rounded-lg hover:bg-white/10 transition-all">Contact Sales</a>
</div>
</div>
</section>Color Breakdown
Gradient Start
from-indigo-600
#4f46e5
Gradient End
to-purple-600
#9333ea
Heading
text-white
#ffffff
Subtext
text-indigo-100
#e0e7ff
Primary Button BG
bg-white
#ffffff
Primary Button Text
text-indigo-700
#4338ca
Dark Mode Variant
Add these Tailwind classes for a dark mode adaptation of this recipe.
dark:from-indigo-800 dark:to-purple-800Use Cases
Newsletter signupFree trial promotionProduct launch announcements
Browser Support
All modern browsers.
Related Recipes
Build Your Own Color Recipe
Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.
Explore ToolsFrequently Asked Questions
Should the CTA have one or two buttons?▼
Use two buttons when you have both a primary action (sign up) and a secondary action (learn more). One button works for simpler CTAs.