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

Login page
Login and register page, you can reuse both

Abhiraj

1 year ago

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

KULDEEP

1 year ago

1.2k
Tailwind CTA section

Moriba Traore

3 years ago

14.2k
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

ORGIN_DREAMS

1 year ago

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

makecomponents

2 years ago

2.7k
Hero Section
Full width hero section for landing pages

Manon Daniel

4 years ago

15k
Product Page
Showcase for the product.

Prem..

4 years ago

34.7k
Greeting Card with CTA
card with two actions with greeting msg according to time

Amit Pachange

3 years ago

8.4k
Simple CTA card

Santos78

3 years ago

14.1k
bottom drawer with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

3.3k
Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Banshee

1 year ago

2.1k
Contact Us Form
CTAs help convert visitors into action-takers (customers, subscribers, etc.), while Contact Us forms enable easy communication, building trust and support. Both are vital for engaging visitors and achieving your website’s objectives.

KULDEEP

1 year ago

1.6k