Responsive Newsletter - Tailwind Component

<section class="items-center mt-12 mx-2 sm:mx-8 max-w-screen-xl px-4 gap-4 md:flex xl:px-8 xl:gap-12 bg-gradient-to-l from-green-500 to-green-700 py-14 rounded-xl">  
  <div class="flex-1 space-y-4 text-center md:text-left">
    <h1 class="text-2xl text-gray-100 font-semibold lg:text-3xl">
      Subscribe to our newsletter
    </h1>
    <p class="text-gray-200 leading-relaxed text-center text-sm md:text-justify md:pr-12">
      We'll send you best of our blog just once a month. We promise.
    </p>
  </div>
  <div class="mt-5 md:mt-0 flex-1 px-0 sm:px-4">
    <form class="items-center justify-center sm:flex">
      <input type="email" placeholder="Enter e-mail"
        class="text-gray-500 w-full p-2 rounded-md border outline-none focus:border-green-800" />
      <button
        class="w-full mt-3 px-5 py-2 rounded-md text-white bg-green-700 hover:bg-green-800 outline-none shadow-md focus:shadow-none focus:ring-2 ring-offset-2 ring-indigo-600 sm:mt-0 sm:ml-3 sm:w-auto">
        Subscribe
      </button>
    </form>
    <p class="mt-3 text-xs text-gray-200">
      Product updates, announcements, and discounts.
      Read our <a class="text-gray-100 hover:text-gray-50 underline" href="#"> Privacy Policy </a>
    </p>  
  </div>
</section>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap');

  body {
    font-family: 'Fira Mono', monospace;
  }
</style>