Call to Action section

CTA with clear message and big button

This tailwind example is contributed by magersa, on 09-Feb-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are CTA,banner

Call to Action

Author magersa

Tailwind v3.4 5.3k 8

Fork Fullscreen

<section class="w-full flex bg-gray-50 dark:bg-gray-900">
  <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
    <div class="text-center space-y-5">
      <h2 class="text-base font-semibold text-pink-400 dark:text-pink-300 tracking-wide uppercase">Unlock Your Potential
        Today</h2>
      <div class="inline-flex items-end justify-center w-full text-center mx-auto">
        <img src="https://cdn.devdojo.com/tails/avatars/024.jpg" class="absolute transform translate-x-24 ml-6 rounded-full w-12 h-12 md:w-16 md:h-16 border-4 border-white">
        <img src="https://cdn.devdojo.com/tails/avatars/012.jpg" class="absolute transform -translate-x-24 -ml-6 rounded-full w-12 h-12 md:w-16 md:h-16 border-4 border-white">
        <img src="https://cdn.devdojo.com/tails/avatars/029.jpg" class="absolute transform -translate-x-16 rounded-full w-16 h-16 md:w-20 md:h-20 border-4 border-white">
        <img src="https://cdn.devdojo.com/tails/avatars/005.jpg" class="absolute transform translate-x-16 rounded-full w-16 h-16 md:w-20 md:h-20 border-4 border-white">
        <img src="https://cdn.devdojo.com/tails/avatars/032.jpg" class="rounded-full w-20 h-20 md:w-24 md:h-24 border-4 border-white relative">
      </div>
      <p
        class="mt-1 text-4xl font-extrabold text-gray-900 dark:text-gray-100 sm:text-5xl sm:tracking-tight lg:text-6xl">
        Discover
        <span class="px-2 py-1 relative inline-block"><svg class="stroke-current bottom-0 absolute text-blue-300 -translate-x-2" viewBox="0 0 410 18" xmlns="http://www.w3.org/2000/svg"><path d="M6 6.4c16.8 16.8 380.8-11.2 397.6 5.602" stroke-width="12" fill="none" fill-rule="evenodd" stroke-linecap="round"></path></svg><span class="relative">Your True Potential</span></span>
      </p>
      <p class="max-w-3xl mt-5 mx-auto text-xl text-gray-500 dark:text-gray-300">Take the leap and unleash your
        capabilities. Experience
        one week of unlimited access on us and witness the transformation.</p>
      <a href="#"
        class="inline-block px-6 py-3 mt-8 bg-blue-600 dark:bg-blue-500 text-white font-semibold rounded hover:bg-blue-700 dark:hover:bg-blue-600">
        Get Started
      </a>
    </div>
  </div>
</section>

Related Examples

Call to action section

Odessa Young

3 years ago

13.5k
Hero section

Mohit Prajapati

4 years ago

12.9k
Tilted button on hover.
A simple button with a gradient and tilt on hover. Dark mode supported with same color.

Banshee

1 year ago

1.4k
Call to action

Leon Bachmann

3 years ago

9.4k
Join Our Community Banner
Encourage users to become members of a community.

Diego Chavez

2 years ago

9k
Modern CTA section
CTA banner

Pixel Perfect

2 years ago

2.5k
CTA banner
With fading bg gradient

Lautaro Gómez

2 years ago

1.8k
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

wavy kits

11 months ago

675
Call to action card with image
Responsive card with image

Noah Schmidt

3 years ago

16.9k
Hero Section
Full width hero section for landing pages

Manon Daniel

4 years ago

14.9k
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

10 months ago

746
Call to action

Leon Bachmann

3 years ago

10.3k