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.4k

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.6k
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.9k
Subscribe to our newsletter section

Author:
Conan Hilton

2 years ago

10.6k
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
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Author:
Abdul Baset Bappy

1 month ago

140
Call to action

Author:
Leon Bachmann

2 years ago

8k
Responsive About Section with Tailwind CSS
Built a sleek and fully responsive About Section for my portfolio using Tailwind CSS! 🚀 Designed for smooth adaptability across all screen sizes with a modern and minimal aesthetic. Perfect for showcasing skills, experience, and a personal touch!

Author:
Abdul Baset Bappy

1 month ago

190

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components