Call to action section

This tailwind example is contributed by Odessa Young, on 02-May-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 Odessa Young

Tailwind v3.4 13.5k 12

Fork Fullscreen

<div class="mt-6 m-auto space-y-6 md:w-8/12 lg:w-7/12">
                <h1 class="text-center text-4xl font-bold text-gray-800 dark:text-white md:text-5xl">Get Started now
                </h1>
                <p class="text-center text-xl text-gray-600 dark:text-gray-300">
                    Be part of millions people around the world using tailus in modern User Interfaces.
                </p>
                <div class="flex flex-wrap justify-center gap-6">
                    <a href="#"
                        class="relative flex h-12 w-full items-center justify-center px-8 before:absolute before:inset-0 before:rounded-full before:bg-teal-500 before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max">
                        <span class="relative text-base font-semibold text-white dark:text-dark">Get Started</span>
                    </a>
                    <a href="#"
                        class="relative flex h-12 w-full items-center justify-center px-8 before:absolute before:inset-0 before:rounded-full before:border before:border-transparent before:bg-teal-500/10 before:bg-gradient-to-b before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 dark:before:border-gray-700 dark:before:bg-gray-800 sm:w-max">
                        <span class="relative text-base font-semibold text-teal-500 dark:text-white">More about</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

</div>

Related Examples

Call to example
Call to example using radial-gradient

Oliver Hansen

3 years ago

9.6k
Join Our Community Banner
Encourage users to become members of a community.

Diego Chavez

2 years ago

9k
Hero section with call to action buttons

Prashant

4 years ago

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

Anonymous

3 years ago

11.5k
CTA card with gradient border

Sameer Sultana

3 years ago

14.5k
Subscribe to our newsletter section

Conan Hilton

4 years ago

12k
Call to action
slightly tilted call to action section

Simon Scheffer

3 years ago

11.9k
Call to Action section
CTA with clear message and big button

magersa

2 years ago

5.3k
Product review card

Moriba Traore

3 years ago

15.8k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

KULDEEP

1 year ago

2.5k
Call to Action Box

Aitrik Saha

1 year ago

2.1k
Call to Action with Background image

Monica D.

2 years ago

2.7k