Inline newsletter

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="[email protected]" 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>