Call to Action (CTA) Section

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

Call to Action

Author ariaw

Tailwind v3.4 1.2k 3

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

Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Coastal UI

2 years ago

2.7k
Landing page

Maxim

1 year ago

2.8k
Animated Text Rotator | Smooth Tailwindcss Text Transition Effects
Beautiful animated text rotation component with smooth fade transitions. Perfect for hero sections, showcasing features, and engaging website visitors with dynamic content.

Homayoun

11 months ago

758
an off line game of catching afox
an off line game of catching afox

Bonimater

1 year ago

1.1k
CTA - call to action section

ABDO-SY

1 year ago

1.3k
Basic CTA section

Lîmåã M

3 years ago

12.8k
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!

Abdul Baset Bappy

1 year ago

2k
REGISTER - CTA - SECTION animation

ABDO-SY

1 year ago

1.2k
CTA - Htmlwind
Screenshot on dark background

Htmlwind

1 year ago

1.9k
Subscribe to our newsletter section

Conan Hilton

4 years ago

12k
Drinkware landing page

Maxim

1 year ago

2.1k
Call to example
Call to example using radial-gradient

Oliver Hansen

3 years ago

9.6k