Home
ariaw
Call to Action (CTA) Section

Call to Action (CTA) Section

This tailwind example is contributed by ariaw, on 09-Apr-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are CTA,banner

Call to Action

Author ariaw

701

Fork Fullscreen

<section class="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-16 px-4">
  <div class="container mx-auto max-w-4xl text-center">
    <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to transform your business?</h2>
    <p class="text-xl md:text-2xl text-blue-100 mb-10 max-w-3xl mx-auto">
      Join thousands of satisfied customers who trust our solutions every day.
    </p>
    
    <div class="flex flex-col sm:flex-row justify-center gap-4">
      <a href="#" class="bg-white text-blue-700 hover:bg-blue-50 px-8 py-4 rounded-lg font-semibold text-lg transition duration-300 transform hover:scale-105 shadow-lg">
        Get Started Now
      </a>
      <a href="#" class="border-2 border-white text-white hover:bg-white hover:text-blue-700 px-8 py-4 rounded-lg font-semibold text-lg transition duration-300 transform hover:scale-105">
        Schedule a Demo
      </a>
    </div>
    
<div class="mt-12 flex flex-col sm:flex-row items-center justify-center sm:space-x-4 space-y-4 sm:space-y-0">
  <div class="flex -space-x-2">
    <img class="h-10 w-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Customer">
    <img class="h-10 w-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/43.jpg" alt="Customer">
    <img class="h-10 w-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/34.jpg" alt="Customer">
  </div>
  <div class="text-center sm:text-left">
    <p class="text-sm text-blue-200">Trusted by 10,000+ businesses</p>
    <div class="flex items-center justify-center sm:justify-start">
      <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
      </svg>
      <span class="ml-2 text-white font-medium">4.9/5 from 500+ reviews</span>
    </div>
  </div>
</div>
  </div>
</section>

Related Examples

Beautiful CTA w/ large buttons
This CTA card also has a features list

Author:
Carla Hoffman

1 year ago

2.5k
Get the app section
Play store and App store buttons

Author:
Sophia Baker

3 years ago

9.7k
Call to Action section for home page

Author:
Sophia Baker

3 years ago

9.5k
Domain For Sale Template
Domain For Sale Template

Author:
Geoffrey Callaghan

2 years ago

4.3k
E-Commerce Delivery Truck Animation
This responsive CSS animation showcases a delivery bus transporting a package to its destination, created entirely with Tailwind CSS and pure HTML. The animation features

Author:
Bonimater

8 months ago

1k
Registration Form with Validation & Success State
A modern and interactive registration form built using Tailwind CSS and Alpine.js, designed for seamless user onboarding with real-time validation and elegant animations. This component includes client-side form validation, dynamic password visibility toggles, and a success confirmation screen with personalized feedback. It’s fully responsive, dark mode–ready, and styled for modern SaaS or startup platforms. ✨ Key Features 🧠 Real-time input validation for required fields (name, email, password, etc.) 🔒 Show/hide password toggle with animated SVG icons ✅ Success message with user details after submission 💨 Animated transitions using Alpine.js 🌙 Dark mode and light mode compatible 📱 Fully responsive across all screen sizes 🧩 Built with pure Tailwind CSS and Alpine.js (no external libraries) 💡 Perfect for: Registration or sign-up pages SaaS onboarding flows Portfolio or agency login systems Form validation demos or UI component libraries

Author:
wavy kits

4 months ago

281
CTA section with light beam from bottom effect
It also has support for dark mode

Author:
Pixel Perfect

1 year ago

2.1k
Basic CTA
Simple and straightforward call to action section

Author:
Dipti narayan

2 years ago

7.8k
Call to Action Box

Author:
Aitrik Saha

1 year ago

1.7k
Hero section with call to action buttons

Author:
Prashant

3 years ago

15.3k
CTA block
with user avatars and 2 buttons

Author:
Carla Hoffman

1 year ago

2.7k
Call for action

Author:
Sophia Baker

3 years ago

11.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components