Text left, email form right
Create an inline newsletter CTA with Tailwind CSS: a bordered rounded-2xl card with a two-part flex layout — heading and subtext on the left, an email input plus subscribe button on the right. On mobile it stacks. Include a tiny privacy note under the form.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? .
Create an inline newsletter CTA with Tailwind CSS: a bordered rounded-2xl card with a two-part flex layout — heading and subtext on the left, an email input plus subscribe button on the right. On mobile it stacks. Include a tiny privacy note under the form.<section class="mx-auto max-w-4xl px-6 py-16">
<div class="flex flex-col items-start justify-between gap-6 rounded-2xl border border-neutral-200 bg-white p-8 md:flex-row md:items-center">
<div>
<h3 class="text-xl font-semibold text-neutral-900">Get the weekly digest</h3>
<p class="mt-1 text-sm text-neutral-500">Product tips and news. One email a week, no spam.</p>
</div>
<form class="w-full md:w-auto">
<div class="flex items-center gap-2">
<input type="email" placeholder="you@example.com" class="w-full rounded-xl border border-neutral-200 px-4 py-2.5 text-sm outline-none focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10 md:w-64" />
<button class="rounded-xl bg-neutral-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-neutral-800">Subscribe</button>
</div>
<p class="mt-2 text-xs text-neutral-400">We respect your privacy.</p>
</form>
</div>
</section>