CTA block

This tailwind example is contributed by Samuel Dawson, on 16-Dec-2022. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner

Call to Action

Author Samuel Dawson

Tailwind v3.4 12.7k 13

Fork Fullscreen

<section class="h-auto bg-black w-full pt-12 md:pb-20 border-b border-[#23232C] p-3">
    <div class="max-w-6xl mx-auto md:text-center tails-relative">
        <h2 class="jakarta text-white font-bold text-xl md:px-0 px-10 md:text-3xl">And many more features ✨</h2>
        <p class="text-gray-400 mt-2 md:mt-5 md:px-0 px-10 md:text-2xl">Try out the app for yourself to see them all!
        </p>
        <a href="#"
            class="inline-flex mt-12 justify-center md:mt-8 items-center w-full px-8 py-5 md:mb-6 text-xl font-bold text-white bg-gradient-to-r from-blue-600 to-indigo-700 hover:from-blue-500 hover:to-indigo-700 sm:mb-0 md:w-auto hover:bg-indigo-600 md:rounded-full">
            <svg class="w-5 h-5 mr-2 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <g fill="none" stroke="none">
                    <path
                        d="M6 12l5.485-5.485A12 12 0 0 1 19.971 3H21v1.029a12 12 0 0 1-3.515 8.486L12 18m-6-6l6 6m-6-6L3 9l.828-.828A4 4 0 0 1 6.657 7H11l-5 5zm6 6l3 3 .828-.828A4 4 0 0 0 17 17.343V13l-5 5zm-4.5-4.5l-2.379 2.379A7.242 7.242 0 0 0 3 21a7.243 7.243 0 0 0 5.121-2.121L10.5 16.5"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M16.778 7.916a.5.5 0 1 1-.556-.832.5.5 0 0 1 .556.832z" fill="#212121"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </g>
            </svg>
            <span>Try the App for FREE</span>
        </a>
    </div>
</section>

Related Examples

Hero section with call to action buttons

Prashant

4 years ago

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

magersa

2 years ago

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

Curtis Bickler

2 years ago

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

Junclarkaizen Pagu

2 years ago

10.1k
asimple game lay out
asimple game lay out

Bonimater

1 year ago

1.3k
Call to action block

Sienna

3 years ago

12.4k
Acode master
Welcome to Hamza's official portfolio — a creative developer blending modern design with powerful code. Explore animations, projects, and innovations crafted with HTML, Tailwind CSS, and passion.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Hero section with image

Sophia Baker

3 years ago

14k
Call to action (CTA) section
Modern and clean CTA section

Bunny

3 years ago

12.5k
Newsletter Signup Form
It features a clean and modern design with a background illustration, making it visually appealing.

TailwindFlex

2 years ago

8.6k
YouTube subscription section

Leif99

3 years ago

14.7k
Product review card

Moriba Traore

3 years ago

15.8k