Home
Elijah Davis
call-to-action button

call-to-action button

This tailwind example is contributed by Elijah Davis, on 01-Feb-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are CTA,banner

Call to Action

Author Elijah Davis

8.8k

Fork Fullscreen

<div class="w-full items-center lg:px-24 max-w-7xl md:px-12 mx-auto px-8 py-12">
    <div class="relative items-center">
        <div class="w-full justify-between lg:inline-flex lg:items-center">
            <div class="max-w-xl">
                <span class="text-sm text-rose-500 font-semibold uppercase tracking-widest">Description</span>
                <p class="text-black font-extrabold mt-8 text-4xl tracking-tight">Get to know Our Brand
                    <span class="lg:block">and it's features.</span>
                </p>
            </div>
            <div class="flex flex-col lg:ml-auto mt-12 sm:flex-row"><a
                    class="w-full items-center inline-flex duration-200 focus:outline-none font-medium justify-center px-6 py-3 rounded-xl text-center focus-visible:outline-black lg:w-auto bg-rose-500 focus-visible:ring-black hover:bg-rose-100 hover:text-rose-500 text-white"
                    href="/signup">Get started now &nbsp;&nbsp;
                    <span class="font-bold text-2xl">
                            →
                    </span>
                </a>
            </div>
        </div>
    </div>
</div>

Related Examples

Navbar with two CTA buttons

Author:
Juraj

4 months ago

866
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.2k
Responsive call to action

Author:
Leon Bachmann

2 years ago

8.8k
CTA section with floating icos as background

Author:
EliteAI Tools

5 months ago

838
Domain For Sale Template
Domain For Sale Template

Author:
Geoffrey Callaghan

1 year ago

3.6k
Tilted button on hover.
A simple button with a gradient and tilt on hover. Dark mode supported with same color.

Author:
Banshee

3 months ago

251
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

2 days ago

41
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

2 days ago

7
CTA - call to action section

Author:
ABDO-SY

2 months ago

269
Contact Us Form
CTAs help convert visitors into action-takers (customers, subscribers, etc.), while Contact Us forms enable easy communication, building trust and support. Both are vital for engaging visitors and achieving your website’s objectives.

Author:
KULDEEP

2 days ago

22
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)

1 month ago

122
Call to action (CTA) section
Modern and clean CTA section

Author:
Bunny

1 year ago

11.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components