Footer With Subscribe Form - Tailwind Component

<h1 class="text-center font-bold py-10 text-3xl">Footer With Subscribe Form</h1>

<div class="container mx-auto px-5 md:px-0">
  <footer class="text-gray-100 bg-gray-800">
    <div class="max-w-5xl mx-auto py-5">
      <h1 class="text-center font-semibold text-xl lg:text-4xl">Join the Brand Media mailing list</h1>
      <p class="text-center px-20 py-1">Sign up to the newsletter and be the first one to know about new product or
        special offers.</p>
      <div class="flex justify-center mt-6">
        <div class="flex-row">
          <div class="bg-white rounded-lg">
            <div class="flex flex-warp justify-between md:flex-row">
              <input type="email"
                class="m-1 p-3 md:w-96 appearance-none border-none text-gray-700 text-sm font-medium focus:outline-none focus:border-white focus:rounded focus:placeholder-transparent"
                placeholder="Enter your email" aria-label="Enter your email">
              <button
                class="w-full text-sm m-1 p-2 text-sm bg-gray-800 rounded-lg font-semibold lg:w-auto hover:bg-gray-700">Subscribe</button>
            </div>
          </div>
          <p class="text-sm ml-1 mt-2 font-light text-gray-300">We wan't spam. Pinky promise</p>
        </div>
      </div>
      <hr class="h-px mt-6 bg-gray-500 border-none">
      <div class="flex flex-col items-center justify-between mt-6 md:flex-row">
        <div class="flex-row flex-1 text-center md:text-left mx-5">
          <a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a>
          <p class="">Brand - Lorem ipsum dolor sit amet consectetur adipisicing elit, soluta consequuntur architecto obcaecati remdicta repellendus.</p>
        </div>
        <div class="flex-1 mt-4 md:m-0">
          <div class="md:ml-20">
            <a href="#" class="px-4 md:pl-10 md:pr-4 text-sm text-gray-100 font-medium hover:text-gray-400">About</a>
            <a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">Blog</a>
            <a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">Contact</a>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>