formsBeginner

Newsletter Signup

Compact newsletter signup with inline email input + button.

Live preview

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 signup with Tailwind: a heading, a one-line explanation, and a horizontal form with an email input and a 'Subscribe' button to its right (stacked on mobile). Below, a tiny disclaimer line about privacy.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/newsletter-signup/1.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-newsletter-signup
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class=" w-full">
<div class="bg-gray-100">
      <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
        <div class="max-w-prose">
          <h2 class="text-2xl font-semibold text-gray-900 sm:text-3xl">
            Sign up for our newsletter
          </h2>

          <p class="mt-4 text-pretty text-gray-700">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe
            architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas
            sequi.
          </p>
        </div>

        <form action="#" class="mt-6 flex max-w-xl flex-col gap-4 sm:flex-row sm:items-center">
          <label for="Email" class="flex-1">
            <span class="sr-only"> Email </span>

            <input
              type="email"
              id="Email"
              placeholder="Enter your email"
              class="h-12 w-full rounded border-gray-300 shadow-sm"
            />
          </label>

          <button
            type="submit"
            class="h-12 rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600"
          >
            Sign Up
          </button>
        </form>
      </div>
    </div>
  </div>
</div>