CTA card with gradient border

This tailwind example is contributed by Sameer Sultana, on 18-Mar-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner

Call to Action

Author Sameer Sultana

Tailwind v3.4 14.5k 12

Fork Fullscreen

<div class="relative mx-auto max-w-5xl mt-20">
    <div class="rounded-xl p-1"
        style="background-image: linear-gradient(to right bottom, rgb(79, 70, 229) 0%, rgb(165, 56, 164) 50%, rgb(220, 38, 38) 100%);">
        <div class="rounded-lg bg-black/80 backdrop-blur">
            <div class="flex w-full flex-wrap items-center justify-between gap-4 px-8 py-10 sm:px-16 lg:flex-nowrap">
                <div class="lg:max-w-xl">
                    <h2
                        class="block w-full pb-2 bg-gradient-to-b from-white to-gray-400 bg-clip-text font-bold text-transparent text-3xl sm:text-4xl">
                        Enhancing Productivity with Artificial Intelligence 
                        </h2>
                    <p class="my-4 bg-transparent font-medium leading-relaxed tracking-wide text-gray-400">
                        Natural Language Processing (NLP): The SmartAI Assistant understands and interprets natural
                        language commands, allowing users to communicate with it effortlessly.
                    </p>
                </div>
                <div class="flex flex-wrap items-center justify-center gap-6 ">
                    <button class="bg-violet-600 text-white button-text flex items-center justify-center whitespace-nowrap rounded-md transition-all duration-300 px-8 py-3 text-xs sm:text-sm">Get Started</button>
                    <button class="flex items-center justify-center whitespace-nowrap rounded-md border border-zinc-700 bg-zinc-900 text-center text-white backdrop-blur transition-all hover:bg-zinc-800 px-8 py-3 text-xs sm:text-sm">Learn More</button>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

Responsive CTA

Lukas Müller

3 years ago

10.5k
Call to action section

Odessa Young

3 years ago

13.5k
Free Animated Gradient Glow Button with Tailwind CSS
A modern, responsive Tailwind CSS button with glowing gradient hover effects, smooth animations, and an integrated SVG icon. Perfect for landing pages, call-to-action buttons, or any stylish UI project. Fully customizable and open source , ready to copy, paste, and use in your projects.

Homayoun

1 year ago

1.1k
Call to action section

Leon Bachmann

3 years ago

7.5k
Call to action
Call to action section. find it makecomponents.com

makecomponents

2 years ago

2.7k
Call to action

Leon Bachmann

3 years ago

9.4k
Greeting Card with CTA
card with two actions with greeting msg according to time

Amit Pachange

2 years ago

8.4k
Call to action
slightly tilted call to action section

Simon Scheffer

3 years ago

11.9k
Brutalist Hero

threehymns

1 year ago

3k
CTA block for "Take our survey"
Get users attention to he survey form

Prajwal Hallale

3 years ago

9.7k
Promotion Block
It features a large, centered title, a brief description, and a prominent CTA button, all centered within a visually appealing layout.

Computer guy

3 years ago

8.3k
Call to Action Box

Aitrik Saha

1 year ago

2.1k