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

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

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

Author:
Junclarkaizen Pagu

2 years ago

9k
Product review card

Author:
Moriba Traore

2 years ago

15.1k
The Future of Web Development
love my product

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

429
Buy Me a Coffee CTA section

Author:
Sienna

2 years ago

9.6k
CTA with image

Author:
Fagundo67

2 years ago

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

Author:
Bunny

2 years ago

11.7k
Call to Action section for home page

Author:
Sophia Baker

2 years ago

9.1k
Modern Contact Section with Responsive Grid and Glassmorphic Form
A clean, professional contact section with a dual-column layout featuring contact details and a sleek glassmorphism-inspired form. Fully responsive with Tailwind CSS, supporting both light and dark modes.

Author:
Muhammad Umair Arshad

2 months ago

202
Free Animated Gradient Glow Button with Tailwind CSS
A modern, responsive Tailwind CSS button with glowing gradient hover effects, smooth animations, and an integrated SVG icon. Perfect for landing pages, call-to-action buttons, or any stylish UI project. Fully customizable and open source , ready to copy, paste, and use in your projects.

Author:
Homayoun

2 weeks ago

48
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

486
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Author:
Abhiraj

8 months ago

1.3k
Blog post card
Responsive blog post or article card. This card can also be used as a CTA

Author:
Anonymous

2 years ago

10.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components