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

11.6k

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

14.9k
Call to action
CTA

Author:
inbarajan P

1 year ago

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

3 months ago

490
CTA banner
With fading bg gradient

Author:
Lautaro Gómez

1 year ago

1.1k
Call to Action Box

Author:
Aitrik Saha

8 months ago

1.3k
Floating Action Button
This component displays a fixed, floating contact button panel positioned at the bottom-right corner of the screen. It provides users with quick access to key communication channels including WhatsApp, Email, and Instagram. Each icon is styled with vibrant, platform-specific colors and includes subtle hover animations for an interactive user experience. Ideal for improving accessibility and encouraging user engagement, especially on mobile devices.

Author:
Arturo Lizana

6 months ago

912
Tailwind CTA section

Author:
Moriba Traore

2 years ago

12.9k
Modern CTA section
CTA banner

Author:
Pixel Perfect

1 year ago

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

Author:
Pagedone

1 year ago

1.7k
CTA banner
Capture the attention of the user with full-width CTA Section

Author:
Anonymous

1 year ago

4.5k
Call to action

Author:
Sophia Baker

2 years ago

10.6k
Component-[callToAction]

Author:
Matti

10 months ago

856

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components