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 v3.4. It is responsive. It supports dark mode. similar terms for this example are CTA,banner

Call to Action

Author Emre Yılmaz

Tailwind v3.4 4.5k 12

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

animated nav
animated nav

Bonimater

1 year ago

862
Call to action
CTA

inbarajan P

2 years ago

2.4k
Hero section with image

Sophia Baker

3 years ago

13.9k
Call to Action Box

Aitrik Saha

1 year ago

2.1k
Clean CTA section

Pixel Perfect

2 years ago

4.1k
Call to action
slightly tilted call to action section

Simon Scheffer

3 years ago

11.9k
Newsletter Signup Form
It features a clean and modern design with a background illustration, making it visually appealing.

TailwindFlex

2 years ago

8.5k
Modern CTA section
CTA with background patterns

Nomthandazo Mhlongo

2 years ago

3k
CTA section with floating icos as background

EliteAI Tools

1 year ago

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

Curtis Bickler

1 year ago

2.6k
Animated Call-to-Action Section
Enhance your website with this , animated CTA section. Includes a gradient text animations, and a stylish avatar group. Easily customizable and designed to improve user engagement. Get the source code now.

Homayoun

11 months ago

678
The Future of Web Development
love my product

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k