Home
Emre Yılmaz
CTA card with gradient background

CTA card with gradient background

Grab users attention using this eye catching CTA card

This tailwind example is contributed by Emre Yılmaz, on 05-Feb-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are CTA,banner

Call to Action

Author Emre Yılmaz

3.6k

Fork Fullscreen

<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
  <div class="relative isolate overflow-hidden bg-blue-800 px-6 py-24 shadow-2xl sm:rounded-3xl sm:px-24 xl:py-32">
    <h2 class="mx-auto max-w-2xl text-center text-3xl font-bold tracking-tight text-white sm:text-4xl">Unlock the Power
      of AI for Your Business. Get Started Today!</h2>
    <p class="mx-auto mt-2 max-w-xl text-center text-lg leading-8 text-gray-200">Discover a tailored AI experience
      tailored to your business needs. Sign up now and leverage our advanced models or let us guide you through the
      possibilities.</p>
    <div class="mt-10 flex items-center justify-center gap-x-6">
      <a class="rounded-md bg-green-500 px-5 py-3 text-lg font-semibold text-white shadow-md hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
        href="/signup">Get Started Now</a>
    </div>
    <svg viewBox="0 0 1024 1024" class="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-x-1/2"
      aria-hidden="true">
      <circle cx="512" cy="512" r="512" fill="url(#759c1415-0410-454c-8f7c-9a820de03641)" fill-opacity="0.7"></circle>
      <defs>
        <radialGradient id="759c1415-0410-454c-8f7c-9a820de03641" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
          gradientTransform="translate(512 512) rotate(90) scale(512)">
          <stop stop-color="#7775D6"></stop>
          <stop offset="1" stop-color="#E935C1" stop-opacity="0"></stop>
        </radialGradient>
      </defs>
    </svg>
  </div>
</div>

Related Examples

Call ya
Simple Call-to-Action

Author:
Matti

8 months ago

1.2k
Clean CTA section

Author:
Pixel Perfect

1 year ago

3.6k
Call to Action section
CTA with clear message and big button

Author:
magersa

1 year ago

4.4k
Call to action banner

Author:
isolde

1 year ago

5.2k
Minimalistic hero section

Author:
Sophia Baker

2 years ago

11.3k
Call to action section with image

Author:
Steven Kuhn

2 years ago

9.8k
Centered footer with CTA
Use this Tailwind CSS footer compoent for simple footer with center aligned everything and with CTA buttons.

Author:
Pagedone

1 year ago

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

Author:
makecomponents

1 year ago

1.8k
Responsive CTA
Tailwind CTA card

Author:
Dika Rahman

1 year ago

2.1k
Floating Action Button
This component displays a fixed, floating contact button panel positioned at the bottom-right corner of the screen. It provides users with quick access to key communication channels including WhatsApp, Email, and Instagram. Each icon is styled with vibrant, platform-specific colors and includes subtle hover animations for an interactive user experience. Ideal for improving accessibility and encouraging user engagement, especially on mobile devices.

Author:
Arturo Lizana

6 months ago

912
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Author:
Abhiraj

8 months ago

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

4 months ago

260

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components