Newsletter subscribe form

A form with a single field and the submit button is inset into the input field.

<form class="m-5">
  <div class="hf-fields-wrap relative max-w-[240px]">
    <input type="email" placeholder="Email" name="email" class="h-12 w-full bg-zinc-300 px-3 py-2 text-zinc-900 ring-offset-2 placeholder:text-zinc-700 focus:outline-none focus:ring focus:ring-violet-300" autocapitalize="off" />

    <button type="submit" class="group absolute right-0 inline-grid h-12 place-content-center px-3 text-zinc-900 ring-offset-2 focus:outline-none focus:ring focus:ring-violet-300" name="subscribe" value="Subscribe" aria-label="Subscribe">
      <svg fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"><path d="M0 7.445a.816.816 0 0 0 .82.814h11.407l-5.17 5.134a.809.809 0 0 0 0 1.147.824.824 0 0 0 1.158 0l6.556-6.523a.838.838 0 0 0 0-1.151L8.21.347a.825.825 0 0 0-1.336.264.812.812 0 0 0 .178.888l5.16 5.136H.808a.807.807 0 0 0-.809.81z" class="fill-current opacity-100 transition-opacity duration-300 group-hover:opacity-70"></path></svg>
    </button>
  </div>
</form>

https://play.tailwindcss.com/qp3dPowp2q

This is being used with the HTML Forms WordPress plugin so the <form> and .hf-fields-wrap elements will be inserted by the plugin. So the class relative and any width setting will need to be added to input.css.

This can be targetted to a specific form like so. And the success/error message will need to be styled also:

[data-title="Footer subscribe"] .hf-fields-wrap {
  @apply relative;
}

[data-title="Footer subscribe"] .hf-message {
  @apply font-medium text-white text-base;
}