ctasBeginner
Call-to-Action Banner
Full-width CTA section with headline, supporting copy, and a primary action.
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 banner with Tailwind: a full-width section with generous vertical padding, centered content — an attention-grabbing headline, a one-sentence supporting paragraph, and a single solid CTA button below. Use a contrasting background (e.g. dark) so it stands out when placed between lighter page sections.
Code
html
<!--
Source: Mark Mead (HyperUI)
https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/ctas/1.html
License: MIT
Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-cta-banner
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
<div class=" w-full">
<section class="overflow-hidden bg-gray-50 sm:grid sm:grid-cols-2">
<div class="p-8 md:p-12 lg:px-16 lg:py-24">
<div class="mx-auto max-w-xl text-center ltr:sm:text-left rtl:sm:text-right">
<h2 class="text-2xl font-bold text-gray-900 md:text-3xl">
Lorem, ipsum dolor sit amet consectetur adipisicing elit
</h2>
<p class="hidden text-gray-500 md:mt-4 md:block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et, egestas tempus tellus etiam
sed. Quam a scelerisque amet ullamcorper eu enim et fermentum, augue. Aliquet amet
volutpat quisque ut interdum tincidunt duis.
</p>
<div class="mt-4 md:mt-8">
<a
href="#"
class="inline-block rounded-sm bg-emerald-600 px-12 py-3 text-sm font-medium text-white transition hover:bg-emerald-700 focus:ring-2 focus:ring-yellow-400 focus:outline-hidden"
>
Get Started Today
</a>
</div>
</div>
</div>
<img
alt=""
src="https://images.unsplash.com/photo-1464582883107-8adf2dca8a9f?auto=format&fit=crop&q=80&w=1160"
class="h-56 w-full object-cover sm:h-full"
/>
</section>
</div>
</div>