Home
magersa
Call to Action section

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 CSS v3. It is responsive. It supports dark mode. similar terms for this example are CTA,banner

Call to Action

Author magersa

3.2k

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

Author:
Odessa Young

1 year ago

11.1k
Take a Survey CTA section

Author:
JaxStone

1 year ago

10.1k
CTA banner
With fading bg gradient

Author:
Lautaro Gómez

6 months ago

710
Survey CTA

Author:
JaxStone

2 years ago

9.6k
Call to Action section
CTA with clear message and big button

Author:
Curtis Bickler

4 months ago

976
Call ya
Simple Call-to-Action

Author:
Matti

1 month ago

229
Call to action banner

Author:
isolde

1 year ago

4.4k
Simple Multi-Purpose Slider
This is a very minimalistic though very usable slider for various situations like CTA's, quotes or other uncomplicated content. I only used Tailwindcss which makes it very lightweight, but due to limitations it's not as flexible as I wished for. This could be easily achieved by a little piece of JS to make it as dynamic as you wish.

Author:
Hielke Brandsma

3 months ago

1k
Domain For Sale Template
Domain For Sale Template

Author:
Geoffrey Callaghan

1 year ago

3.3k
Basic CTA section

Author:
Lîmåã M

1 year ago

11.2k
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.

Author:
Coastal UI

4 months ago

704
Call for action

Author:
Sophia Baker

2 years ago

10.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components