Newsletter Components in Zospace library

<section class="py-20 2xl:py-40 bg-gray-800">
  <div class="container px-4 mx-auto">
    <div class="max-w-5xl mx-auto">
      <div class="relative pt-16 px-6 lg:px-24 pb-20 bg-gray-600 rounded-3xl overflow-hidden">
        <img class="absolute top-0 left-0" src="zospace-assets/lines/blue-half-circle.svg" alt="">
        <img class="hidden lg:block absolute top-0 right-0 mt-6 mr-12" src="zospace-assets/images/stars.svg" alt="">
        <img class="hidden lg:block absolute top-0 right-0 w-96 h-96 -mt-14 -mr-14" src="zospace-assets/lines/circle.svg" alt="">
        <div class="relative">
          <span class="text-base lg:text-lg text-white font-bold">More news</span>
          <h3 class="mt-6 mb-12 text-5xl lg:text-6xl text-white font-bold font-heading">Subscribe now</h3>
          <div class="sm:max-w-md mb-8 sm:flex sm:items-center sm:bg-white sm:rounded-full">
            <span class="hidden sm:inline-block pl-2 sm:pl-6 lg:pl-10">
              <svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="18.5" cy="18.5" r="9.5" fill="#1F40FF" fill-opacity="0.15"></circle><circle cx="18.5" cy="18.5" r="18.5" fill="#1F40FF" fill-opacity="0.06"></circle><circle cx="18.5" cy="18.5" r="2.5" fill="#282C36"></circle></svg>
            </span>
            <input class="w-full sm:w-auto mb-4 sm:mb-0 pl-8 sm:pl-4 py-5 rounded-full placeholder-gray-900 font-bold focus:outline-none" type="email" placeholder="Drop your Email">
            <button class="w-full sm:w-auto ml-auto px-10 py-5 text-white font-bold bg-blue-500 hover:bg-blue-600 rounded-full transition duration-200">Subscribe</button>
          </div>
          <p class="text-gray-200">
            <span>The brown fox jumps over</span>
            <span class="text-white">the lazy dog.</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="bg-secondary-dark py-24 py-md-40">
  <div class="container position-relative">
    <div class="position-relative mw-6xl mx-auto"><img class="position-absolute top-0 end-0 mt-n16 me-6 img-fluid" style="z-index: 1;" src="zospace-assets/images/stars.svg" alt=""/>
      <div class="position-relative px-6 ps-sm-12 ps-md-24 pe-sm-12 ps-xxl-36 pe-xxl-20 pt-20 pb-24 overflow-hidden rounded bg-secondary"><img class="position-absolute top-0 start-0 mt-n12 mw-6xl mw-md-none" src="zospace-assets/lines/blue-half-circle.svg" alt=""/><img class="position-absolute top-0 end-0 mt-n64 mw-sm mw-md-lg img-fluid" src="zospace-assets/lines/circle.svg" alt=""/>
        <div class="position-relative mw-lg"><span class="h6 text-white" >More news</span>
          <h4 class="text-white mt-2 mb-6" >Subscribe now</h4>
          <div class="input-group mb-8 bg-white rounded-pill">
            <input class="form-control ps-md-24 py-3 me-4 me-lg-14 border-0 bg-transparent" type="email" placeholder="Drop your Email" aria-label="Drop your Email" aria-describedby=""/>
            <svg class="d-none d-md-block position-absolute top-50 start-0 ms-10 translate-middle-y" width="37" height="37" viewbox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="18.5" cy="18.5" r="9.5" fill="#1F40FF" fill-opacity="0.15"></circle>
              <circle cx="18.5" cy="18.5" r="18.5" fill="#1F40FF" fill-opacity="0.06"></circle>
              <circle cx="18.5" cy="18.5" r="2.5" fill="#282C36"></circle>
            </svg>
            <button class="btn btn-primary px-md-12 rounded-pill" type="button" id="" >Subscribe</button>
          </div>
          <p class="text-secondary-light mb-0"><span >The brown fox jumps over </span><span class="text-white" >the lazy dog.</span></p>
        </div>
      </div>
    </div>
  </div>
</section>