Modern CTA section

CTA banner

This tailwind example is contributed by Pixel Perfect, on 03-Jul-2024. 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 Pixel Perfect

Tailwind v3.4 2.6k 7

Fork Fullscreen

<div class="bg-slate-50 dark:bg-gray-800 border-b my-20">
    <div class="py-8 px-6 sm:px-6 sm:py-20">
        <div class="mx-auto max-w-2xl text-center">
            <h2 class="text-center text-2xl font-semibold tracking-tight text-black dark:text-white sm:text-4xl">
                Start creating AI
                Arts today
            </h2>
            <p
                class="mx-auto mt-3 sm:mt-6 max-w-xl text-md sm:text-lg sm:leading-snug text-gray-600 dark:text-gray-300">
                Automate your
                workflow with our state of the art tools. Let Your Imagination Run Wild.
            </p>
            <div class="mt-6 sm:mt-10 flex items-center justify-center gap-x-6">
                <a class="flex flex-row items-center justify-center min-w-[130px] px-4 rounded-full font-medium tracking-wide border disabled:cursor-not-allowed disabled:opacity-50 transition ease-in-out duration-150 text-base bg-black dark:bg-white text-white dark:text-black font-medium tracking-wide border-transparent py-1.5 h-[38px] text-sm py-6 px-8"
                    href="/#navbar">
                    Get Started Now
                </a>
            </div>
        </div>
    </div>
</div>

Related Examples

Landing page hero section UI
Modern Hero Section Design

UI-Templates

1 year ago

1.5k
Basic CTA section

Lîmåã M

3 years ago

12.8k
Hero section with call to action buttons

Prashant

4 years ago

15.9k
Buy Me a Coffee CTA section

Sienna

3 years ago

10.5k
Tailwind CSS Button (Wavy Button)
The button uses Tailwind classes for size, background, border, border-radius, shadow, cursor, overflow, and transitions. The wave overlay is absolutely positioned at the bottom of the button, initially off-screen (top-full) and moves to the middle (top-1/2) on hover via the custom .wave class and keyframes. The font-poppins class isn’t a default Tailwind class. You should define it in your Tailwind configuration or replace it with font-sans if you haven't extended fonts.

KULDEEP

1 year ago

1.4k
Call to Action
CTA with Dark and Shadow colors

KULDEEP

1 year ago

1.7k
CTA - Htmlwind
Screenshot on dark background

Htmlwind

1 year ago

1.9k
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
Animated Text Rotator | Smooth Tailwindcss Text Transition Effects
Beautiful animated text rotation component with smooth fade transitions. Perfect for hero sections, showcasing features, and engaging website visitors with dynamic content.

Homayoun

11 months ago

759
REGISTER - CTA - SECTION animation

ABDO-SY

1 year ago

1.2k
Clean CTA section

Pixel Perfect

2 years ago

4.1k
Responsive CTA
Tailwind CTA card

Dika Rahman

2 years ago

2.9k