Home
Leon Bachmann
Call to action section

Call to action section

This tailwind example is contributed by Leon Bachmann, on 19-Jan-2023. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are CTA,banner

Call to Action

Author Leon Bachmann

6.7k

Fork Fullscreen

<div class="bg-gray-100 dark:bg-gray-800 mt-20">
    <div class="z-20 w-full px-4 py-12 mx-auto text-center sm:px-6 lg:py-16 lg:px-8">
        <h2 class="text-black dark:text-white sm:text-4xl">
            <span class="text-base font-semibold leading-6 text-indigo-500 uppercase">
                IT ONLY TAKES A FEW EASY STEPS
            </span>
            <span class="block mt-2 text-2xl font-extrabold leading-8 text-gray-900 dark:text-white sm:text-3xl sm:leading-9">
                Create your first API in minutes
            </span>
        </h2>

<div class="lg:mt-0 lg:flex-shrink-0">
            <div class="inline-flex mt-12 rounded-md shadow">
                <a href=""
                    class="w-full px-6 py-4 text-base font-semibold text-center text-white transition duration-200 ease-in bg-indigo-600 rounded-lg shadow-md hover:bg-indigo-700 focus:ring-indigo-500 focus:ring-offset-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 ">
                    Get Started Now - It's free
                </a>
            </div>
        </div>
    </div>
</div>

Related Examples

Call to action

Author:
Leon Bachmann

2 years ago

8.6k
Hero section with image

Author:
Sophia Baker

2 years ago

13k
Basic CTA card

Author:
kishan pc

1 year ago

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

8 months ago

1.2k
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

3 years ago

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

4 months ago

615
Animated Call-to-Action Section
Enhance your website with this , animated CTA section. Includes a gradient text animations, and a stylish avatar group. Easily customizable and designed to improve user engagement. Get the source code now.

Author:
Homayoun

2 months ago

202
Greeting Card with CTA
card with two actions with greeting msg according to time

Author:
Amit Pachange

2 years ago

7.8k
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Author:
Coastal UI

1 year ago

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

Author:
TailwindFlex

2 years ago

8k
CTA Search Section
CTA search form

Author:
EliteAI Tools

11 months ago

1k
Very simple hero

Author:
Laurits

3 years ago

8.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components