ctasBeginner

CTA — Inline Headline

Inline CTA with headline on left, button on right.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a CTA section with Tailwind: a large headline on the left and a single primary button on the right, on the same horizontal row. Stacks on mobile. Used as a closing punch on landing pages.

Code

html

<!--
  Source: Mert Cukuren (Tailblocks)
  https://github.com/mertJF/tailblocks/blob/master/src/blocks/cta/light/a.js
  License: MIT
  Surfaced via https://vibedex.io/components/tailblocks-cta-light-a
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="w-full">
<section class="text-gray-600 body-font">
      <div class="container px-5 py-24 mx-auto">
        <div class="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
          <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">Six months in and the velocity is hard to believe. We went from a feature every two weeks to a feature every two days.</h1>
          <button class="flex-shrink-0 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0">
            Button
          </button>
        </div>
      </div>
    </section>
  </div>
</div>