Newsletter Components in Asitrastudio library

<section class="py-5 bg-coolGray-100">
  <div class="container mx-auto px-4">
    <div class="max-w-lg lg:max-w-none mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 xl:w-7/12 px-4">
          <div class="max-w-xl py-20 lg:py-40">
            <span class="block mb-4 text-sm font-medium">Lorem Ipsum</span>
            <div class="max-w-sm sm:max-w-md xl:max-w-none mb-12">
              <h1 class="font-heading text-6xl xs:text-8xl sm:text-9xl xl:text-10xl tracking-tighter mb-8">Keep up with our contant</h1>
              <p class="max-w-sm text-lg text-coolGray-600">It is a long established fact that a reader will be distracted by the readable content</p>
            </div>
            <div class="sm:flex max-w-xl">
              <div class="w-full mb-3 sm:mb-0 mr-4">
                <input class="w-full h-15 py-4 px-8 text-coolGray-500 bg-white border-0 rounded-full" type="email" placeholder="Enter your email">
              </div>
              <div class="w-full sm:w-auto sm:flex-shrink-0">
                <button class="inline-block w-full sm:w-auto h-15 py-4 px-8 text-center font-medium text-white leading-none bg-black hover:bg-blue-500 rounded-full transition duration-150" type="submit">Sign Up</button>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2 xl:w-5/12 px-4">
          <img class="block h-full w-full rounded-4xl object-cover" src="asitrastudio-assets/newsletter/photo1.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section py-5 has-background-light">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-6-desktop is-7-widescreen">
        <div class="has-mw-md has-mw-xl-desktop mx-auto mx-0-desktop py-20 py-40-desktop">
          <span class="is-block mb-4 is-size-7 has-text-weight-medium has-text-dark">Lorem Ipsum</span>
          <div class="has-mw-sm has-mw-none-desktop has-mw-md-tablet mb-12">
            <h1 class="title is-size-2 is-size-1-desktop mb-10" style="letter-spacing: -0.04em;">Keep up with our contant</h1>
            <p class="has-mw-sm subtitle is-size-6">It is a long established fact that a reader will be distracted by the readable content</p>
          </div>
          <div>
            <div class="field is-flex-tablet is-justify-content-center">
              <div class="control is-fullwidth mr-0-mobile mr-3 mb-2 mb-0-tablet">
                <input class="input has-background-white has-text-dark" type="email" placeholder="Enter your email" style="border: none;">
              </div>
              <div class="control">
                <button class="button is-dark is-fullwidth is-rounded" type="submit">Sign Up</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-5-widescreen is-6-desktop">
        <img class="is-block image is-fullwidth has-mw-md mx-auto has-mw-none-desktop is-covered" style="object-fit: cover; height: 100%; border-radius: 30px;" src="asitrastudio-assets/newsletter/photo1.png" alt="">
      </div>
    </div>
  </div>
</section>

<section class="py-5 bg-light">
  <div class="container">
    <div class="mw-lg mw-lg-none mx-auto">
      <div class="row">
        <div class="col-12 col-lg-6 col-xl-7">
          <div class="mw-xl py-20 py-lg-40"><span class="d-block mb-4 fw-medium fs-9" >Lorem Ipsum</span>
            <div class="mw-sm mw-md-md mw-lg-none mb-12">
              <h1 class="mb-8" >Keep up with our contant</h1>
              <p class="mw-sm fs-7 text-secondary-light mb-0" >
                It is a long established fact that a reader will be
                distracted by the readable content
              </p>
            </div>
            <div>
              <div class="d-sm-flex mw-xl">
                <div class="w-100 mb-3 mb-sm-0 me-4">
                  <input class="form-control bg-white border-0" type="email" placeholder="Enter your email"/>
                </div>
                <div class="flex-shrink-0">
                  <button class="btn w-100 h-100 btn-dark" type="submit" >Sign Up</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-6 col-xl-5"><img class="img-fluid d-block h-100 w-100 rounded-5" style="object-fit: cover;" src="asitrastudio-assets/newsletter/photo1.png" alt=""/></div>
      </div>
    </div>
  </div>
</section>