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

12.3k

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

8.6k
Call to action section

Author:
Odessa Young

1 year ago

11.1k
call-to-action button

Author:
Elijah Davis

2 years ago

8.3k
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Author:
Coastal UI

3 months ago

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

Author:
Amit Pachange

1 year ago

6.7k
Call ya
Simple Call-to-Action

Author:
Matti

2 weeks ago

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

Author:
Anonymous

1 year ago

15.9k
Survey CTA

Author:
JaxStone

1 year ago

13.3k
Clean CTA

Author:
Kofi Osei

1 year ago

10.8k
Responsive call to action

Author:
Leon Bachmann

1 year ago

8.3k
Responsive CTA
Tailwind CTA card

Author:
Dika Rahman

10 months ago

1.5k
Call to Action (CTA with Background Image)
A Call to Action (CTA) is an essential element in marketing and web design that prompts users to take a specific desired action. When combined with a compelling background image, it can significantly enhance user engagement and conversion rates.

Author:
Eliyanto Sarage

7 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components