Tailwind CSS Newsletter Components – Nigodo Library

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="text-center">
      <span class="text-lg font-extrabold text-indigo-500">Newsletter</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-4">Sign up for our newsletter</h1>
      <p class="text-xl font-extrabold leading-8 mb-10">Stay in the loop with everything you need to know.</p>
    </div>
    <div class="max-w-lg mx-auto">
      <div class="flex flex-wrap -mx-2 justify-center">
        <div class="flex-grow w-full md:w-auto px-2 mb-2">
          <input class="inline-block w-full p-4 text-lg font-extrabold placeholder-indigo-900 shadow border-2 border-indigo-900 rounded outline-none" type="email" placeholder="Enter your email">
        </div>
        <div class="w-full md:w-auto px-2 mb-2"><a class="inline-flex items-center justify-center w-full md:w-auto h-full py-4 px-5 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 rounded transition duration-200" href="#">Subscribe</a></div>
        <div class="w-full px-2">
          <p class="text-xs font-extrabold">We care about your data in our privacy policy</p>
        </div>
      </div>
    </div>
  </div>
</section>