Newsletter Subscription Section Using Tailwind UI

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
  rel="stylesheet">

<style>
  .body {
    font-family: 'Plus Jakarta Sans', sans-serif;
  }
</style>

</head>

<div class="bg-[#281414] h-screen w-screen py-24">
  <div class="px-8 mx-auto max-w-4xl text-[#91825A]">
    <div class="mb-12 space-y-16 text-center sm:mb-24">
      <h1 class="text-4xl font-semibold uppercase md:text-7xl">Lorem Ipsum news</h1>
      <form action="">
        <div class="mb-8 -mx-3 md:flex">
          <div class="px-3 mb-6 md:w-1/4 md:mb-0">
            <input
              class="appearance-none block w-full text-[#91825A] focus:outline-none bg-[#281414] border-y border-[#91825A] py-3 px-4 placeholder:text-[#91825A]"
              id="first-name" type="text" placeholder="FIRST NAME">
          </div>
          <div class="px-3 mb-6 md:w-1/4 md:mb-0">
            <input
              class="appearance-none block w-full text-[#91825A] focus:outline-none bg-[#281414] border-y border-[#91825A] py-3 px-4 placeholder:text-[#91825A]"
              id="last-name" type="text" placeholder="LAST NAME">
          </div>
          <div class="px-3 md:w-2/4">
            <input
              class="appearance-none block w-full text-[#91825A] focus:outline-none bg-[#281414] border-y border-[#91825A] py-3 px-4 placeholder:text-[#91825A]"
              id="email" type="text" placeholder="EMAIL ADDRESS">
          </div>
        </div>
        <button type="submit"
          class="w-full border border-[#91825A] hover:bg-[#91825A] hover:text-[#281414] uppercase py-4">
          Subscribe
        </button>
      </form>
      <p class="text-sm">By subscribing, you understand and agree to our <a href="#"
          class="underline cursor-pointer">Privacy Policy</a>.</p>
    </div>
  </div>
</div>