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

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.5k
Hero section with call to action buttons

Author:
Prashant

3 years ago

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

Author:
Anonymous

2 years ago

10.2k
CTA card with gradient border

Author:
Sameer Sultana

2 years ago

13.8k
Subscribe to our newsletter section

Author:
Conan Hilton

3 years ago

11.5k
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

2 years ago

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

Author:
magersa

1 year ago

4.5k
Product review card

Author:
Moriba Traore

2 years ago

15.1k
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

8 months ago

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

Author:
Anonymous

2 years ago

19.6k
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

10 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components