ctasBeginner
CTA — Inline Headline
Inline CTA with headline on left, button on right.
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-ryan-staxs-projects-fb4e0931.vercel.app/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">
Slow-carb next level shoindxgoitch ethical authentic, scenester
sriracha forage.
</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>