Home
Odessa Young
Call to action section

Call to action section

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

11.3k

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

Author:
Oliver Hansen

2 years ago

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

Author:
Diego Chavez

1 year ago

7.6k
Hero section with call to action buttons

Author:
Prashant

2 years ago

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

Author:
Anonymous

1 year ago

9.3k
CTA card with gradient border

Author:
Sameer Sultana

2 years ago

12.8k
Subscribe to our newsletter section

Author:
Conan Hilton

2 years ago

10.5k
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

2 years ago

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

Author:
magersa

1 year ago

3.7k
Product review card

Author:
Moriba Traore

2 years ago

14.6k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

9 months ago

2.3k
Hero section

Author:
Mohit Prajapati

2 years ago

11.5k
Call to Action (CTA with Background Image)
A Call to Action (CTA) is an essential element in marketing and web design that prompts users to take a specific desired action. When combined with a compelling background image, it can significantly enhance user engagement and conversion rates.

Author:
Eliyanto Sarage

9 months ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components