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
CTA banner
With fading bg gradient

Lautaro Gómez

2 years ago

1.8k
Centered footer with CTA
Use this Tailwind CSS footer compoent for simple footer with center aligned everything and with CTA buttons.

Pagedone

2 years ago

2.8k
Call to Action

Abdul Baset Bappy

1 year ago

1.3k
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
Responsive CTA

Lukas Müller

3 years ago

10.5k
The Future of Web Development
love my product

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k
Call to action
CTA

inbarajan P

2 years ago

2.5k
SliceHeaven
delivering pizza

INGRIDE MUZIRANENGE

1 year ago

1.6k
Call to action

Piet Vriend

3 years ago

11.3k
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Abdul Baset Bappy

1 year ago

1.5k
Product hunt showcase section

Leon Bachmann

3 years ago

10.9k