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

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

3 years ago

10.1k
Call to action section

Author:
Odessa Young

2 years ago

12.9k
Call to Action

Author:
Abdul Baset Bappy

7 months ago

654
Product review card

Author:
Moriba Traore

3 years ago

15.4k
Minimalistic hero section

Author:
Sophia Baker

3 years ago

11.8k
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

8 months ago

768
Modern CTA section
CTA with background patterns

Author:
Nomthandazo Mhlongo

1 year ago

2.4k
Simple call to action

Author:
Laurits

3 years ago

10.1k
Take a Survey CTA section

Author:
JaxStone

2 years ago

11.2k
CTA with image

Author:
Fagundo67

3 years ago

10k
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Author:
Hamza Atig

9 months ago

1.1k
Tailwind CTA section

Author:
Moriba Traore

2 years ago

13.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components