Home
Samuel Dawson
CTA block

CTA block

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

Call to Action

Author Samuel Dawson

12k

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

Author:
Prashant

3 years ago

15.4k
Tailwind CSS Button (Wavy Button)
The button uses Tailwind classes for size, background, border, border-radius, shadow, cursor, overflow, and transitions. The wave overlay is absolutely positioned at the bottom of the button, initially off-screen (top-full) and moves to the middle (top-1/2) on hover via the custom .wave class and keyframes. The font-poppins class isn’t a default Tailwind class. You should define it in your Tailwind configuration or replace it with font-sans if you haven't extended fonts.

Author:
KULDEEP

8 months ago

951
Call to action
Call to action section. find it makecomponents.com

Author:
makecomponents

1 year ago

2.1k
Responsive CTA
Tailwind CTA card

Author:
Dika Rahman

1 year ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

732
Basic CTA
Simple and straightforward call to action section

Author:
Dipti narayan

2 years ago

7.8k
Hero section with a gradient background
With text overlay, and a call-to-action button

Author:
Anonymous

2 years ago

20.3k
Call-to-Action Card
Early Access Signup Card

Author:
Santiago Hernandez

1 year ago

2k
Drinkware landing page

Author:
Maxim

11 months ago

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

Author:
Bunny

2 years ago

11.9k
Take a Survey CTA section

Author:
JaxStone

3 years ago

11.2k
Call to action component
Start your free 7-day trial Call to action button

Author:
S. Patel

2 years ago

8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components