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

12.8k

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

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

Author:
Diego Chavez

2 years ago

8.6k
Hero section with call to action buttons

Author:
Prashant

3 years ago

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

Author:
Anonymous

2 years ago

10.6k
CTA card with gradient border

Author:
Sameer Sultana

2 years ago

13.9k
Subscribe to our newsletter section

Author:
Conan Hilton

3 years ago

11.6k
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

3 years ago

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

Author:
magersa

2 years ago

4.6k
Product review card

Author:
Moriba Traore

3 years ago

15.4k
e-commerce website landing page template with Tailwind CSS.
A clean, responsive e-commerce & blog template built with Tailwind CSS. Features light/dark mode, dynamic featured posts, hero, CTA, and SEO-ready sections.

Author:
Homayoun

1 month ago

433
Footer
A footer is a critical part of any professional website. A footer ensures your website is complete, professional, user-friendly, and legally compliant. It's where users go for answers when they're done scrolling.

Author:
KULDEEP

7 months ago

1k
Responsive CTA
Tailwind CTA card

Author:
Dika Rahman

1 year ago

2.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components