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-800

Use 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 Tools

Frequently 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.