Call to action section

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

Call to Action

Author Leon Bachmann

Tailwind v3.4 7.5k 14

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

Modern CTA section
CTA with background patterns

Nomthandazo Mhlongo

2 years ago

3k
Minimalistic hero section

Sophia Baker

3 years ago

12k
Jumbotron card

Sienna

3 years ago

12.3k
Call to action section with image

Steven Kuhn

3 years ago

10.9k
Call to action

Piet Vriend

3 years ago

11.3k
REGISTER - CTA - SECTION animation

ABDO-SY

1 year ago

1.1k
Call to action block

Sienna

3 years ago

12.4k
Minimal CTA section

Laurits

3 years ago

10.1k
CTA banner
With fading bg gradient

Lautaro Gómez

2 years ago

1.8k
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Hamza Atig

1 year ago

1.3k
Bubblegum Button
This interactive button component is designed with a sleek gradient background and smooth hover effects, making it an eye-catching call-to-action element for modern web interfaces. Styling and Features: ✅ Gradient Background & Rounded Shape • The button container has a subtle gradient overlay (bg-gradient-to-tr) that smoothly transitions from soft pink (from-pink-300) to light blue (to-blue-300), giving it a vibrant and modern look. • Wrapped in a rounded-full container for a pill-shaped aesthetic. ✅ Floating & Shadow Effects • The shadow-lg property creates a soft floating effect, enhancing depth and visibility. • Will-change-transform optimizes animations for a seamless hover experience. ✅ Interactive Hover Animations • On hover, the inner button scales up (hover:scale-105) and lifts slightly (hover:-translate-y-2), simulating a press-and-release motion. • The transition is smooth, with a 500ms animation (transition duration-500). ✅ Content & Icon • The “Learn more” label is paired with a right-arrow icon (svg) for clear visual guidance. • The icon and text are flex-aligned (items-center flex), ensuring a balanced and responsive layout. This button is ideal for call-to-action elements, product highlights, or download prompts, offering a modern, sleek, and engaging user experience. 🚀

Banshee

1 year ago

1.9k
Call to action

Leon Bachmann

3 years ago

9.4k