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

704

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

Hero section with button

Author:
Samuel Dawson

3 years ago

12.9k
Responsive About Section with Tailwind CSS
Built a sleek and fully responsive About Section for my portfolio using Tailwind CSS! 🚀 Designed for smooth adaptability across all screen sizes with a modern and minimal aesthetic. Perfect for showcasing skills, experience, and a personal touch!

Author:
Abdul Baset Bappy

11 months ago

1.6k
CTA - call to action section

Author:
ABDO-SY

11 months ago

998
Component-[callToAction]

Author:
Matti

1 year ago

1.1k
Drinkware landing page

Author:
Maxim

11 months ago

1.5k
Modern Contact Section with Responsive Grid and Glassmorphic Form
A clean, professional contact section with a dual-column layout featuring contact details and a sleek glassmorphism-inspired form. Fully responsive with Tailwind CSS, supporting both light and dark modes.

Author:
Muhammad Umair Arshad

7 months ago

674
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Author:
Junclarkaizen Pagu

2 years ago

9.4k
Call to action
Call to action section. find it makecomponents.com

Author:
makecomponents

1 year ago

2.1k
Subscribe to our newsletter section

Author:
Conan Hilton

3 years ago

11.7k
Tailwind CSS Button (Wavy Button)
The button uses Tailwind classes for size, background, border, border-radius, shadow, cursor, overflow, and transitions. The wave overlay is absolutely positioned at the bottom of the button, initially off-screen (top-full) and moves to the middle (top-1/2) on hover via the custom .wave class and keyframes. The font-poppins class isn’t a default Tailwind class. You should define it in your Tailwind configuration or replace it with font-sans if you haven't extended fonts.

Author:
KULDEEP

8 months ago

958
Highlighted Important section with button

Author:
Amit Pachange

3 years ago

9.9k
CTA with image

Author:
Fagundo67

3 years ago

10k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components