COMPONENTS · SECTIONS

Tailwind Call to Action Components & Sections

Copy, paste and style CTAs for signups and promos. Add your own JS if needed.

9 sections2 freeTailwind CSS v4HTML · React · MCP

Pick sectionsTailkits UI

FREE CALL TO ACTION SECTIONS · COPY AND PASTE

All free sections

Call to Action: Background

Free
Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-call-to-action-2.json
View HTML code
<section class="pt-12 lg:pt-16 pb-12 lg:pb-16">
  <div class="max-w-7xl mx-auto px-4 xl:px-0">
    <div
      data-tk-motion="reveal scale"
      class="relative overflow-hidden rounded-tk-3xl bg-tk-brand lg:grid lg:grid-cols-2 lg:rounded-[3rem]"
    >
      <div
        class="flex flex-col items-start px-4 pb-80 pt-4 lg:px-16 lg:pb-16 lg:pt-40"
      >
        <h2
          class="text-3xl font-semibold text-tk-brand-foreground sm:w-4/5 lg:w-11/12 lg:text-5xl lg:leading-tight xl:w-3/4"
        >
          Experience innovation like never before
        </h2>
        <a
          href="/sign-up"
          title="Try free"
          class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm bg-primary text-primary-foreground hover:bg-tk-primary-hover disabled:bg-primary/30 disabled:text-tk-primary-foreground-muted/70 px-4 py-2.5 rounded-tk mt-6 flex"
          data-tk-hover="press"
        >
          Try free
          <span class="ml-1 text-tk-primary-foreground-faint"> - 14 days</span>
          <svg
            class="shrink-0 ml-2 h-4"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            aria-hidden="true"
            data-slot="icon"
          >
            <path
              fill-rule="evenodd"
              d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z"
              clip-rule="evenodd"
            />
          </svg>
        </a>
      </div>
      <figure class="lg:relative">
        <img
          class="absolute left-16 top-52 h-80 object-cover object-left-top sm:left-44 sm:top-44 sm:h-[30rem] lg:left-24 lg:top-24 lg:h-[42rem]"
          src="https://tailkits.com/ui/iframe/assets/img/browser-mock-up-dark.png"
          alt="Mockup"
        />
      </figure>
    </div>
  </div>
</section>

Call to Action: Centered

Free
Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-call-to-action-1.json
View HTML code
<section class="pt-12 lg:pt-16 relative pb-12 lg:pb-16">
  <img
    class="absolute left-0 top-0 -z-20 h-full w-full object-cover"
    src="https://tailkits.com/ui/iframe/assets/img/bg-8.png"
    alt=""
  />
  <div
    class="max-w-7xl mx-auto px-4 xl:px-0 flex flex-col items-center"
    data-tk-motion="reveal scale"
  >
    <div
      class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-background text-secondary-foreground px-2.5 py-1"
    >
      Get full access
    </div>
    <h2
      class="mx-auto mt-8 bg-gradient-to-b from-tk-title-start to-tk-title-end bg-clip-text text-center text-3xl font-semibold text-transparent sm:w-4/5 md:w-3/5 lg:mt-9 lg:text-4xl lg:leading-tight xl:w-7/12"
    >
      Unleash the power of SaaS innovation: Ignite your success!
    </h2>
    <p
      class="mt-4 text-center text-sm font-medium text-tk-ink-soft sm:w-1/2 lg:w-2/5"
    >
      Experience the next level of growth and innovation with our game-changing
      Saas solutions
    </p>
    <a
      href="/features"
      title="Learn more"
      class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm bg-primary text-primary-foreground hover:bg-tk-primary-hover disabled:bg-primary/30 disabled:text-tk-primary-foreground-muted/70 px-4 py-2.5 rounded-tk mt-8 flex md:mt-10 xl:mt-12"
      data-tk-hover="press"
    >
      <svg
        class="shrink-0 mr-2 h-4"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="currentColor"
        aria-hidden="true"
        data-slot="icon"
      >
        <path
          fill-rule="evenodd"
          d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
          clip-rule="evenodd"
        />
      </svg>
      Learn more
      <svg
        class="shrink-0 ml-2 h-4"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="currentColor"
        aria-hidden="true"
        data-slot="icon"
      >
        <path
          fill-rule="evenodd"
          d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z"
          clip-rule="evenodd"
        />
      </svg>
    </a>
  </div>
</section>

7 MORE CALL TO ACTION SECTIONS IN TAILKITS UI

See plans

CALL TO ACTION SECTIONS FROM OTHER LIBRARIES

All component libraries

Third-party libraries in the Tailkits directory that include call to action sections. Reviewed by the editors; sponsored listings are marked.

Pagedone

Free

500+ Tailwind components with Figma file

HyperUI

Free

226 Free & Open Source Tailwind CSS Components

Efferd

Free

Beautiful Shadcn blocks - ready-to-use & built for speed

ReUI

Freemium

Free shadcn/ui data grid, filters and chat examples; Pro blocks from $249

Prime UI

Paid

AI site builder, Next.js, Tailwind, no code

Tailark

Freemium

Free and Pro shadcn/ui marketing blocks and pages

MORE TAILWIND SECTIONS

Hero 31Features 23How It Works 20Testimonial 13Footer 12Pricing 10Navbar 9Newsletter 9Blog 7Contact 7FAQ 7Header 7Logo Cloud 7Team 7Sign In 6Sign Up 6Stats 6Waitlist 6Announcement Bar 5Comparison 5Integrations 5Launch 5Roadmap 5Blog Content 3Launch Badges 3Bento Grid 2Coming Soon 2
GOOD TO KNOW

Frequently asked questions

Answers to common questions about Tailwind call to action components.

Are these Tailwind call to action sections free?

2 of the 9 call to action sections on this page are free (Background, Centered): copy the HTML above, no account needed. The other 7 are part of Tailkits UI, the paid library; each shows a preview here and unlocks its code with a Tailkits UI plan.

Which Tailwind CSS version do the call to action components use?

Tailwind CSS v4. The code is plain HTML with utility classes; colours, radii and shadows read CSS variables named like shadcn/ui's (bg-primary, text-muted-foreground), so a shadcn theme or a DESIGN.md export reskins every section. Add tailkits-theme.css next to the code for the default look.

Can I use these call to action sections in React or Next.js?

Yes. Every section is also a React component in the @tailkits shadcn registry. Free sections install without an account, for example: npx shadcn@latest add https://tailkits.com/r/free-<name>.json. Paid sections install with the token from your Tailkits UI account.

Can an AI coding assistant add a call to action section for me?

Yes. The Tailkits MCP at tailkits.com/mcp is free and open, with no account: Claude Code, Cursor and other MCP clients can search the call to action sections and insert the code into your project. A Tailkits UI token unlocks the Pro section code.

Which other libraries have Tailwind call to action components?

The directory lists 14 third-party libraries with call to action sections, including , , . They are shown below our own sections, with their pricing and stack.