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

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

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

Author:
Banshee

1 year ago

984
Tailwind CTA section

Author:
Moriba Traore

3 years ago

13.5k
Product Page
Showcase for the product.

Author:
Prem..

3 years ago

33.3k
Hero section with a gradient background
With text overlay, and a call-to-action button

Author:
Anonymous

2 years ago

20.4k
Boimator welcoming back
Boimator welcoming back

Author:
Bonimater

7 months ago

610
Bug Beach Day Heatwave
This playful animation brings sweltering summer insects to life with pure HTML and Tailwind CSS. Watch as: 🔥 Glowing Fireflies pulse with heat-radiant light, their wings shimmering in the desert sun 🐞 Overheated Ladybugs scuttle across cracked earth, their red shells reflecting the blazing heat ☀️ A Wobbling Sun dominates the sky, emitting pulsing heat waves across the animated landscape

Author:
Bonimater

10 months ago

1.1k
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. 🚀

Author:
Banshee

1 year ago

1.4k
call-to-action button

Author:
Elijah Davis

3 years ago

9.3k
Hero section with call to action buttons

Author:
Prashant

3 years ago

15.4k
CTA banner
With fading bg gradient

Author:
Lautaro Gómez

1 year ago

1.4k
Animated Gradient Button Component
Button component with smooth hover effects and glass-morphism design. Features expanding gradient animation, rotating icon, and responsive layout. Perfect for call-to-action buttons, landing pages, and web applications. Easy copy-paste Tailwind CSS code ready for integration.

Author:
Homayoun

5 months ago

762
Call to Action with Background image

Author:
Monica D.

1 year ago

2.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components