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

3 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.6k
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
Get Started ,Membership section - responsive - darkMode

ABDO-SY

1 year ago

1.5k
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. 🚀

Banshee

1 year ago

2k
Tilted button on hover.
A simple button with a gradient and tilt on hover. Dark mode supported with same color.

Banshee

1 year ago

1.4k