Home
Sameer Sultana
CTA card with gradient border

CTA card with gradient border

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

Call to Action

Author Sameer Sultana

13.1k

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

Author:
Lukas Müller

2 years ago

9.4k
Call to action section

Author:
Odessa Young

2 years ago

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

Author:
Prajwal Hallale

2 years ago

9.6k
CTA card with gradient background
Grab users attention using this eye catching CTA card

Author:
Emre Yılmaz

1 year ago

3.2k
Bug Beach Day Heatwave
This playful animation brings sweltering summer insects to life with pure HTML and Tailwind CSS. Watch as: 🔥 Glowing Fireflies pulse with heat-radiant light, their wings shimmering in the desert sun 🐞 Overheated Ladybugs scuttle across cracked earth, their red shells reflecting the blazing heat ☀️ A Wobbling Sun dominates the sky, emitting pulsing heat waves across the animated landscape

Author:
Bonimater

3 weeks ago

24
Take a Survey CTA section

Author:
JaxStone

2 years ago

10.6k
CTA Call To Action
CTA stands for "Call to Action." It is a marketing term that refers to prompts that encourage users to take a specific action. CTAs are typically found in websites, advertisements, emails, and various marketing materials. The goal of a CTA is to guide users toward a desired action that supports business objectives, such as: 1. Encouraging Engagement: A CTA may prompt users to sign up for a newsletter, follow on social media, or download a resource. 2. Driving Conversion: It can lead users to make a purchase, book a service, or start a free trial. 3. Generating Leads: A CTA might encourage users to fill out a form, requesting more information or a consultation.

Author:
KULDEEP

1 week ago

31
Minimalistic hero section

Author:
Sophia Baker

2 years ago

11k
Brutalist Hero

Author:
threehymns

6 months ago

1.7k
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Author:
Junclarkaizen Pagu

1 year ago

8.4k
Survey CTA

Author:
JaxStone

2 years ago

13.7k
Simple call to action

Author:
Laurits

2 years ago

9.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components