ctasBeginner
CTA — Newsletter
CTA with embedded email signup form.
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 newsletter-CTA with Tailwind: a heading + paragraph above an inline email input + Subscribe button. Slim disclaimer line below.
Code
html
<!--
Source: Mark Mead (HyperUI)
https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/ctas/3.html
License: MIT
Surfaced via https://vibedex.io/components/hyperui-cta-3
-->
<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 sm:items-center">
<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-1484959014842-cd1d967a39cf?auto=format&fit=crop&q=80&w=1160"
class="h-full w-full object-cover sm:h-[calc(100%-2rem)] sm:self-end sm:rounded-ss-[30px] md:h-[calc(100%-4rem)] md:rounded-ss-[60px]"
/>
</section>
</div>
</div>