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

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

CTA block for "Take our survey"
Get users attention to he survey form

Author:
Prajwal Hallale

2 years ago

9.6k
Responsive CTA
Tailwind CTA card

Author:
Dika Rahman

1 year ago

1.6k
Product hunt showcase section

Author:
Leon Bachmann

2 years ago

9.4k
Basic CTA
Simple and straightforward call to action section

Author:
Dipti narayan

1 year ago

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

4 weeks ago

132
Call to action banner

Author:
isolde

1 year ago

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

Author:
makecomponents

7 months ago

1.2k
Modern responsive Newsletter form
Responsive newsletter subscriber form

Author:
Emdadul Islam

10 months ago

1.7k
Boost Your Business with a Stunning Website!
Take your online presence to the next level with a high-performing, visually captivating website. Let’s build something amazing together!

Author:
Vikas Kushwah

4 weeks ago

167
Beautiful CTA w/ large buttons
This CTA card also has a features list

Author:
Carla Hoffman

1 year ago

1.5k
Drinkware landing page

Author:
Maxim

1 month ago

312
Call to Action (CTA) Section

Author:
ᴀʀ!ᴀ

2 weeks ago

17

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components