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

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

9k
Call to action section

Author:
Odessa Young

1 year ago

11.3k
Get Started ,Membership section - responsive - darkMode

Author:
ABDO-SY

3 weeks ago

132
Call to action component
Start your free 7-day trial Call to action button

Author:
S. Patel

1 year ago

7.2k
Survey CTA

Author:
JaxStone

2 years ago

13.5k
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Author:
Abdul Baset Bappy

5 hours ago

6
Blog post card
Responsive blog post or article card. This card can also be used as a CTA

Author:
Anonymous

1 year ago

9.1k
Hero section with button

Author:
Samuel Dawson

2 years ago

11.4k
Call to action

Author:
Leon Bachmann

2 years ago

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

9 months ago

1.6k
Login page
Login and register page, you can reuse both

Author:
Abhiraj

2 months ago

666
Call to action (CTA) section
Modern and clean CTA section

Author:
Bunny

1 year ago

11k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components