Call to Action Components

Beautiful, responsive CTA components built with TailwindCSS. Perfect for landing pages, conversion sections, and promotional banners. Copy, paste, and customize for React, Vue, or HTML.

1. Minimal CTA

Clean and simple call to action section with centered content and minimal design.

Ready to get started?

Join thousands of users who are already using our platform to build amazing projects.

<section class="py-16 px-6 text-center">
    <div class="max-w-3xl mx-auto">
        <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Ready to get started?</h2>
        <p class="text-xl text-gray-600 mb-8">Join thousands of users who are already using our platform to build amazing projects.</p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <button class="px-8 py-3 bg-violet text-white font-semibold rounded-lg hover:bg-violet/90 transition-colors">
                Get Started Free
            </button>
            <button class="px-8 py-3 text-gray-700 font-semibold hover:text-violet transition-colors">
                Learn More →
            </button>
        </div>
    </div>
</section>
<template>
  <section class="py-16 px-6 text-center">
    <div class="max-w-3xl mx-auto">
      <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Ready to get started?</h2>
      <p class="text-xl text-gray-600 mb-8">Join thousands of users who are already using our platform to build amazing projects.</p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
        <button 
          @click="handleGetStarted"
          class="px-8 py-3 bg-violet text-white font-semibold rounded-lg hover:bg-violet/90 transition-colors"
        >
          Get Started Free
        </button>
        <button 
          @click="handleLearnMore"
          class="px-8 py-3 text-gray-700 font-semibold hover:text-violet transition-colors"
        >
          Learn More →
        </button>
      </div>
    </div>
  </section>
</template>

<script setup>
const handleGetStarted = () => {
  // Handle get started action
  console.log('Get started clicked')
}

const handleLearnMore = () => {
  // Handle learn more action
  console.log('Learn more clicked')
}
</script>
import React from 'react'

const MinimalCTA = () => {
  const handleGetStarted = () => {
    // Handle get started action
    console.log('Get started clicked')
  }

  const handleLearnMore = () => {
    // Handle learn more action
    console.log('Learn more clicked')
  }

  return (
    <section className="py-16 px-6 text-center">
      <div className="max-w-3xl mx-auto">
        <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Ready to get started?</h2>
        <p className="text-xl text-gray-600 mb-8">Join thousands of users who are already using our platform to build amazing projects.</p>
        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
          <button 
            onClick={handleGetStarted}
            className="px-8 py-3 bg-violet text-white font-semibold rounded-lg hover:bg-violet/90 transition-colors"
          >
            Get Started Free
          </button>
          <button 
            onClick={handleLearnMore}
            className="px-8 py-3 text-gray-700 font-semibold hover:text-violet transition-colors"
          >
            Learn More →
          </button>
        </div>
      </div>
    </section>
  )
}

export default MinimalCTA

2. Gradient Hero CTA

Eye-catching gradient background with modern design and compelling call to action.

Transform Your Business Today

Join over 10,000 companies using our platform to accelerate their growth and achieve remarkable results.

No credit card required
14-day free trial
Cancel anytime 
<section class="bg-gradient-to-r from-violet to-purple-600 py-16 px-6 text-center text-white relative overflow-hidden">
    <!-- Background Pattern -->
    <div class="absolute inset-0 opacity-10">
        <div class="absolute top-10 left-10 w-16 h-16 bg-white rounded-full"></div>
        <div class="absolute top-20 right-20 w-8 h-8 bg-white rounded-full"></div>
        <div class="absolute bottom-20 left-20 w-12 h-12 bg-white rounded-full"></div>
        <div class="absolute bottom-10 right-10 w-6 h-6 bg-white rounded-full"></div>
    </div>
    
    <div class="max-w-4xl mx-auto relative z-10">
        <h2 class="text-4xl md:text-5xl font-bold mb-6">Transform Your Business Today</h2>
        <p class="text-xl md:text-2xl mb-8 opacity-90">Join over 10,000 companies using our platform to accelerate their growth and achieve remarkable results.</p>
        
        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
            <button class="px-8 py-4 bg-white text-violet font-bold rounded-lg hover:bg-gray-100 transition-colors shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                Start Free Trial
            </button>
            <button class="px-8 py-4 border-2 border-white text-white font-semibold rounded-lg hover:bg-white hover:text-violet transition-colors">
                Watch Demo
            </button>
        </div>
        
        <div class="flex items-center justify-center gap-6 text-sm opacity-80">
            <div class="flex items-center gap-2">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                </svg>
                No credit card required
            </div>
            <div class="flex items-center gap-2">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                </svg>
                14-day free trial
            </div>
            <div class="flex items-center gap-2">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                </svg>
                Cancel anytime
            </div>
        </div>
    </div>
</section>
<template>
  <section class="bg-gradient-to-r from-violet to-purple-600 py-16 px-6 text-center text-white relative overflow-hidden">
    <!-- Background Pattern -->
    <div class="absolute inset-0 opacity-10">
      <div class="absolute top-10 left-10 w-16 h-16 bg-white rounded-full"></div>
      <div class="absolute top-20 right-20 w-8 h-8 bg-white rounded-full"></div>
      <div class="absolute bottom-20 left-20 w-12 h-12 bg-white rounded-full"></div>
      <div class="absolute bottom-10 right-10 w-6 h-6 bg-white rounded-full"></div>
    </div>
    
    <div class="max-w-4xl mx-auto relative z-10">
      <h2 class="text-4xl md:text-5xl font-bold mb-6">Transform Your Business Today</h2>
      <p class="text-xl md:text-2xl mb-8 opacity-90">Join over 10,000 companies using our platform to accelerate their growth and achieve remarkable results.</p>
      
      <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
        <button 
          @click="handleStartTrial"
          class="px-8 py-4 bg-white text-violet font-bold rounded-lg hover:bg-gray-100 transition-colors shadow-lg hover:shadow-xl transform hover:-translate-y-1"
        >
          Start Free Trial
        </button>
        <button 
          @click="handleWatchDemo"
          class="px-8 py-4 border-2 border-white text-white font-semibold rounded-lg hover:bg-white hover:text-violet transition-colors"
        >
          Watch Demo
        </button>
      </div>
      
      <div class="flex items-center justify-center gap-6 text-sm opacity-80">
        <div class="flex items-center gap-2">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
          </svg>
          No credit card required
        </div>
        <div class="flex items-center gap-2">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
          </svg>
          14-day free trial
        </div>
        <div class="flex items-center gap-2">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
          </svg>
          Cancel anytime
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
const handleStartTrial = () => {
  // Handle start trial action
  console.log('Start trial clicked')
}

const handleWatchDemo = () => {
  // Handle watch demo action
  console.log('Watch demo clicked')
}
</script>
import React from 'react'

const GradientHeroCTA = () => {
  const handleStartTrial = () => {
    // Handle start trial action
    console.log('Start trial clicked')
  }

  const handleWatchDemo = () => {
    // Handle watch demo action
    console.log('Watch demo clicked')
  }

  return (
    <section className="bg-gradient-to-r from-violet to-purple-600 py-16 px-6 text-center text-white relative overflow-hidden">
      {/* Background Pattern */}
      <div className="absolute inset-0 opacity-10">
        <div className="absolute top-10 left-10 w-16 h-16 bg-white rounded-full"></div>
        <div className="absolute top-20 right-20 w-8 h-8 bg-white rounded-full"></div>
        <div className="absolute bottom-20 left-20 w-12 h-12 bg-white rounded-full"></div>
        <div className="absolute bottom-10 right-10 w-6 h-6 bg-white rounded-full"></div>
      </div>
      
      <div className="max-w-4xl mx-auto relative z-10">
        <h2 className="text-4xl md:text-5xl font-bold mb-6">Transform Your Business Today</h2>
        <p className="text-xl md:text-2xl mb-8 opacity-90">Join over 10,000 companies using our platform to accelerate their growth and achieve remarkable results.</p>
        
        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
          <button 
            onClick={handleStartTrial}
            className="px-8 py-4 bg-white text-violet font-bold rounded-lg hover:bg-gray-100 transition-colors shadow-lg hover:shadow-xl transform hover:-translate-y-1"
          >
            Start Free Trial
          </button>
          <button 
            onClick={handleWatchDemo}
            className="px-8 py-4 border-2 border-white text-white font-semibold rounded-lg hover:bg-white hover:text-violet transition-colors"
          >
            Watch Demo
          </button>
        </div>
        
        <div className="flex items-center justify-center gap-6 text-sm opacity-80">
          <div className="flex items-center gap-2">
            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"></path>
            </svg>
            No credit card required
          </div>
          <div className="flex items-center gap-2">
            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"></path>
            </svg>
            14-day free trial
          </div>
          <div className="flex items-center gap-2">
            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"></path>
            </svg>
            Cancel anytime
          </div>
        </div>
      </div>
    </section>
  )
}

export default GradientHeroCTA

3. Newsletter Signup CTA

Email capture section with modern design, perfect for building your subscriber list.

Stay in the loop

Get the latest updates, tips, and exclusive content delivered straight to your inbox every week.

No spam, unsubscribe at any time. We respect your privacy.

+5K
Join 5,000+ subscribers 
<section class="bg-gray-900 py-16 px-6">
    <div class="max-w-4xl mx-auto text-center">
        <div class="bg-white rounded-2xl shadow-2xl p-8 md:p-12 relative overflow-hidden">
            <!-- Decorative elements -->
            <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-violet to-purple-600 rounded-full -translate-y-16 translate-x-16 opacity-10"></div>
            <div class="absolute bottom-0 left-0 w-24 h-24 bg-gradient-to-tr from-emerald-400 to-cyan-400 rounded-full translate-y-12 -translate-x-12 opacity-10"></div>
            
            <div class="relative z-10">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Stay in the loop</h2>
                <p class="text-xl text-gray-600 mb-8">Get the latest updates, tips, and exclusive content delivered straight to your inbox every week.</p>
                
                <div class="max-w-md mx-auto">
                    <div class="flex flex-col sm:flex-row gap-4 mb-6">
                        <input 
                            type="email" 
                            placeholder="Enter your email address" 
                            class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet focus:border-transparent outline-none transition-all"
                        >
                        <button class="px-8 py-3 bg-violet text-white font-semibold rounded-lg hover:bg-violet/90 transition-colors whitespace-nowrap">
                            Subscribe
                        </button>
                    </div>
                    
                    <p class="text-sm text-gray-500">No spam, unsubscribe at any time. We respect your privacy.</p>
                    
                    <!-- Social proof -->
                    <div class="flex items-center justify-center gap-4 mt-6 pt-6 border-t border-gray-200">
                        <div class="flex -space-x-2">
                            <div class="w-8 h-8 bg-gradient-to-r from-violet to-purple-600 rounded-full border-2 border-white"></div>
                            <div class="w-8 h-8 bg-gradient-to-r from-emerald-400 to-cyan-400 rounded-full border-2 border-white"></div>
                            <div class="w-8 h-8 bg-gradient-to-r from-orange-400 to-pink-400 rounded-full border-2 border-white"></div>
                            <div class="w-8 h-8 bg-gradient-to-r from-blue-400 to-indigo-500 rounded-full border-2 border-white flex items-center justify-center text-white text-xs font-bold">
                                +5K
                            </div>
                        </div>
                        <span class="text-sm text-gray-600">Join 5,000+ subscribers</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<template>
  <section class="bg-gray-900 py-16 px-6">
    <div class="max-w-4xl mx-auto text-center">
      <div class="bg-white rounded-2xl shadow-2xl p-8 md:p-12 relative overflow-hidden">
        <!-- Decorative elements -->
        <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-violet to-purple-600 rounded-full -translate-y-16 translate-x-16 opacity-10"></div>
        <div class="absolute bottom-0 left-0 w-24 h-24 bg-gradient-to-tr from-emerald-400 to-cyan-400 rounded-full translate-y-12 -translate-x-12 opacity-10"></div>
        
        <div class="relative z-10">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Stay in the loop</h2>
          <p class="text-xl text-gray-600 mb-8">Get the latest updates, tips, and exclusive content delivered straight to your inbox every week.</p>
          
          <div class="max-w-md mx-auto">
            <div class="flex flex-col sm:flex-row gap-4 mb-6">
              <input 
                v-model="email"
                type="email" 
                placeholder="Enter your email address" 
                class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet focus:border-transparent outline-none transition-all"
              >
              <button 
                @click="handleSubscribe"
                class="px-8 py-3 bg-violet text-white font-semibold rounded-lg hover:bg-violet/90 transition-colors whitespace-nowrap"
              >
                Subscribe
              </button>
            </div>
            
            <p class="text-sm text-gray-500">No spam, unsubscribe at any time. We respect your privacy.</p>
            
            <!-- Social proof -->
            <div class="flex items-center justify-center gap-4 mt-6 pt-6 border-t border-gray-200">
              <div class="flex -space-x-2">
                <div class="w-8 h-8 bg-gradient-to-r from-violet to-purple-600 rounded-full border-2 border-white"></div>
                <div class="w-8 h-8 bg-gradient-to-r from-emerald-400 to-cyan-400 rounded-full border-2 border-white"></div>
                <div class="w-8 h-8 bg-gradient-to-r from-orange-400 to-pink-400 rounded-full border-2 border-white"></div>
                <div class="w-8 h-8 bg-gradient-to-r from-blue-400 to-indigo-500 rounded-full border-2 border-white flex items-center justify-center text-white text-xs font-bold">
                  +5K
                </div>
              </div>
              <span class="text-sm text-gray-600">Join 5,000+ subscribers</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'

const email = ref('')

const handleSubscribe = () => {
  // Handle newsletter subscription
  console.log('Subscribe clicked with email:', email.value)
}
</script>
import React, { useState } from 'react'

const NewsletterSignupCTA = () => {
  const [email, setEmail] = useState('')

  const handleSubscribe = () => {
    // Handle newsletter subscription
    console.log('Subscribe clicked with email:', email)
  }

  return (
    <section className="bg-gray-900 py-16 px-6">
      <div className="max-w-4xl mx-auto text-center">
        <div className="bg-white rounded-2xl shadow-2xl p-8 md:p-12 relative overflow-hidden">
          {/* Decorative elements */}
          <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-violet to-purple-600 rounded-full -translate-y-16 translate-x-16 opacity-10"></div>
          <div className="absolute bottom-0 left-0 w-24 h-24 bg-gradient-to-tr from-emerald-400 to-cyan-400 rounded-full translate-y-12 -translate-x-12 opacity-10"></div>
          
          <div className="relative z-10">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Stay in the loop</h2>
            <p className="text-xl text-gray-600 mb-8">Get the latest updates, tips, and exclusive content delivered straight to your inbox every week.</p>
            
            <div className="max-w-md mx-auto">
              <div className="flex flex-col sm:flex-row gap-4 mb-6">
                <input 
                  type="email" 
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="Enter your email address" 
                  className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet focus:border-transparent outline-none transition-all"
                />
                <button 
                  onClick={handleSubscribe}
                  className="px-8 py-3 bg-violet text-white font-semibold rounded-lg hover:bg-violet/90 transition-colors whitespace-nowrap"
                >
                  Subscribe
                </button>
              </div>
              
              <p className="text-sm text-gray-500">No spam, unsubscribe at any time. We respect your privacy.</p>
              
              {/* Social proof */}
              <div className="flex items-center justify-center gap-4 mt-6 pt-6 border-t border-gray-200">
                <div className="flex -space-x-2">
                  <div className="w-8 h-8 bg-gradient-to-r from-violet to-purple-600 rounded-full border-2 border-white"></div>
                  <div className="w-8 h-8 bg-gradient-to-r from-emerald-400 to-cyan-400 rounded-full border-2 border-white"></div>
                  <div className="w-8 h-8 bg-gradient-to-r from-orange-400 to-pink-400 rounded-full border-2 border-white"></div>
                  <div className="w-8 h-8 bg-gradient-to-r from-blue-400 to-indigo-500 rounded-full border-2 border-white flex items-center justify-center text-white text-xs font-bold">
                    +5K
                  </div>
                </div>
                <span className="text-sm text-gray-600">Join 5,000+ subscribers</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

export default NewsletterSignupCTA

🚀 How to Use These Components

Requirements

  • TailwindCSS v4.0+ installed (Install Guide)
  • AlpineJS for interactivity (HTML version)
  • React/Vue for framework versions

Pro Tip: These CTA components work great for landing pages, product launches, newsletter signups, and conversion optimization. Customize colors, copy, and actions to match your brand and goals.

We use cookies to improve your experience and analytics. You can accept all cookies or reject non-essential ones.

Learn More