Home
Amit Pachange
Highlighted Important section with button

Highlighted Important section with button

This tailwind example is contributed by Amit Pachange, on 21-Jan-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are CTA,banner

Call to Action

Author Amit Pachange

9.9k

Fork Fullscreen

<div class="bg-gray-100 pb-6">
    <div
        class="text-center lg:text-left max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
        <h3 class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-tight">
            Ready to monitor some websites?<br>
            <span class="text-blue-600">Get started for free.</span>
        </h3>
        <div class="justify-center lg:justify-left mt-8 flex lg:flex-shrink-0 lg:mt-0">
            <div class="inline-flex">
                <a href="" target="_blank"
                    class="inline-flex items-center justify-center px-5 py-3 text-base leading-6 font-medium text-blue-600 hover:text-blue-500 focus:outline-none transition duration-150 ease-in-out">
                    See in action
                </a>
            </div>
            <div class="ml-3 inline-flex rounded-md shadow">
                <a href=""
                    class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
                    Get started
                </a>
            </div>
        </div>
    </div>
</div>

Related Examples

Call to Action with Background image

Author:
Monica D.

1 year ago

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

Author:
Bunny

2 years ago

11.9k
Very simple hero

Author:
Laurits

3 years ago

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

955
Sign In Form
Clean and modern Sign In form with email, password, and "Forgot password" link. Fully responsive and styled with Tailwind CSS, perfect for SaaS platforms.

Author:
Lekhraj Ghimire

8 months ago

839
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

7 months ago

554
Simple Btn animation

Author:
Ranit Saha

1 year ago

1.9k
Call to action block

Author:
Sienna

3 years ago

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

Author:
András Szehofner

1 year ago

1.2k
Call to action

Author:
Sophia Baker

3 years ago

10.9k
Drinkware landing page

Author:
Maxim

11 months ago

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

Author:
TailwindFlex

2 years ago

8.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components