Inline Newsletter Signup

<!-- A label the field can be reached by, visually hidden so the design stays
     clean without leaving the input nameless to a screen reader. -->
<section class="mx-auto w-full max-w-xl rounded-2xl border border-gray-200 bg-gray-50 p-6 text-center sm:p-8 dark:border-gray-800 dark:bg-gray-900">
  <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Get the weekly digest</h3>
  <p class="mx-auto mt-2 max-w-md text-sm leading-relaxed text-gray-600 dark:text-gray-400">
    One email a week with our newest posts. No spam, unsubscribe anytime.
  </p>
  <form class="mt-5 flex flex-col gap-3 sm:flex-row">
    <label for="newsletter-email" class="sr-only">Email address</label>
    <input
      id="newsletter-email"
      type="email"
      required
      autocomplete="email"
      placeholder="you@example.com"
      class="w-full flex-1 rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100"
    />
    <button
      type="submit"
      class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 motion-reduce:transition-none dark:focus-visible:ring-offset-gray-900"
    >
      Subscribe
    </button>
  </form>
</section>