Component

Call To Action

Free, copy-pasteable Tailwind CSS Call To Action component. Accessible, fully responsive, dark-mode ready, and customizable.

On this page

Simple Call To Action Card Style Call To Action Call To Action with Form

AI NewsletterRead →

How Machines Think

Sponsor Business Wish (500+ Devs)Claim this spot →

Install via CLI

Run this command to automatically add the component and its dependencies to your project.

npx @abhaysinghr516/business-wish add call-to-action

New to the CLI? Run npx @abhaysinghr516/business-wish init first to initialize your project.

A persuasive Tailwind call to action is the tipping point for user conversion. These Tailwind CTA sections range from bold, standalone layouts to elegant newsletter signups, all featuring butter-smooth hover states and meticulously balanced typography.

Ensure your CTA stands out by pairing it with an impactful Hero Section, and utilize our optimized Buttons for maximum click-through rates.

Simple Call To Action

Preview

import React from "react";

const CTA = () => {
  return (
    <div className="relative overflow-hidden bg-white dark:bg-neutral-950 py-24 sm:py-32">
      <div className="absolute inset-x-0 top-0 h-40 bg-gradient-to-b from-neutral-50 to-transparent dark:from-neutral-900"></div>
      <div className="relative z-10 mx-auto max-w-4xl px-6 text-center">
        <h2 className="text-4xl font-semibold tracking-tight text-neutral-900 dark:text-neutral-50 sm:text-5xl lg:text-6xl">
          Join Us Today
        </h2>
        <p className="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-neutral-600 dark:text-neutral-400">
          Sign up now to get exclusive offers, product updates, and early access to our latest features.
        </p>
        <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
          <button className="w-full sm:w-auto inline-flex items-center justify-center rounded-full bg-neutral-900 px-8 py-3.5 text-sm font-medium text-white shadow-[0_1px_2px_rgba(0,0,0,0.05)] transition-all duration-300 hover:scale-105 hover:bg-neutral-800 hover:shadow-[0_8px_16px_rgba(0,0,0,0.1)] focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-2 active:scale-95 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-200 dark:focus:ring-white dark:focus:ring-offset-neutral-950">
            Get Started
          </button>
          <button className="w-full sm:w-auto inline-flex items-center justify-center rounded-full bg-transparent px-8 py-3.5 text-sm font-medium text-neutral-900 transition-all duration-300 hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-2 active:scale-95 dark:text-white dark:hover:bg-neutral-800 dark:focus:ring-white dark:focus:ring-offset-neutral-950">
            Learn More
          </button>
        </div>
      </div>
    </div>
  );
};

export default CTA;

Card Style Call To Action

Preview

import React from "react";

const CTA = () => {
  return (
    <div className="bg-neutral-50 dark:bg-neutral-900 py-24 sm:py-32">
      <div className="mx-auto max-w-5xl px-6 lg:px-8">
        <div className="relative isolate overflow-hidden rounded-[2.5rem] bg-white dark:bg-neutral-950 px-6 py-16 shadow-2xl shadow-neutral-200/50 dark:shadow-black/50 sm:rounded-[3rem] sm:px-16 md:py-24 lg:flex lg:items-center lg:gap-x-20 lg:px-24 border border-neutral-100 dark:border-white/5">
          <div className="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-neutral-100/80 via-transparent to-transparent dark:from-white/5 opacity-50 block pointer-events-none"></div>
          <div className="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-8 lg:text-left">
            <h2 className="text-3xl font-semibold tracking-tight text-neutral-900 dark:text-white sm:text-4xl">
              Get Started Today.
              <br />
              <span className="text-neutral-400 dark:text-neutral-500">Unlock your potential.</span>
            </h2>
            <p className="mt-6 text-lg leading-relaxed text-neutral-600 dark:text-neutral-400">
              Start your journey with us and enjoy exclusive benefits tailored to help you grow and succeed in your endeavors.
            </p>
            <div className="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
              <button className="inline-flex items-center justify-center rounded-full bg-neutral-900 px-8 py-3.5 text-sm font-medium text-white shadow-sm transition-all duration-300 hover:bg-neutral-800 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-2 active:scale-95 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-200 dark:focus:ring-white dark:focus:ring-offset-neutral-950">
                Sign Up Now
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CTA;

Call To Action with Form

Preview

import React from "react";

const CTA = () => {
  return (
    <div className="bg-white dark:bg-neutral-950 py-24 sm:py-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-12 lg:max-w-none lg:grid-cols-2 lg:items-center">
          <div>
            <h2 className="text-3xl font-semibold tracking-tight text-neutral-900 dark:text-white sm:text-4xl">
              Subscribe to Our Newsletter
            </h2>
            <p className="mt-4 text-lg leading-relaxed text-neutral-600 dark:text-neutral-400">
              Get the latest news, updates, and exclusive content delivered straight to your inbox. No spam, just value.
            </p>
          </div>
          <div className="flex flex-col items-start gap-y-4 sm:flex-row sm:items-center sm:gap-x-3 lg:justify-end">
            <div className="w-full sm:max-w-md">
              <label htmlFor="email-address" className="sr-only">
                Email address
              </label>
              <input
                id="email-address"
                name="email"
                type="email"
                autoComplete="email"
                required
                className="w-full min-w-0 appearance-none rounded-full border border-neutral-200 bg-white px-5 py-3.5 text-base text-neutral-900 placeholder-neutral-400 shadow-sm transition-all duration-200 hover:border-neutral-300 focus:border-neutral-900 focus:outline-none focus:ring-1 focus:ring-neutral-900 dark:border-neutral-800 dark:bg-neutral-900 dark:text-white dark:placeholder-neutral-500 dark:hover:border-neutral-700 dark:focus:border-white dark:focus:ring-white"
                placeholder="Enter your email"
              />
            </div>
            <button
              type="submit"
              className="mt-3 flex w-full items-center justify-center rounded-full bg-neutral-900 px-6 py-3.5 text-sm font-medium text-white shadow-sm transition-all duration-300 hover:bg-neutral-800 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-2 active:scale-95 sm:mt-0 sm:w-auto dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-200 dark:focus:ring-white dark:focus:ring-offset-neutral-950"
            >
              Subscribe
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CTA;

Button

Card