Newsletter UI Components – Yofte Library

<section class="py-20 bg-gray-100 overflow-x-hidden">
  <div class="container px-4 mx-auto">
    <div class="relative max-w-4xl mx-auto">
      <div class="absolute inset-0 bg-blue-200 my-12 -ml-12 -mr-12"></div>
      <div class="relative pt-20 pb-32 px-8 bg-blue-300 text-center">
        <a class="inline-block mb-14" href="#">
          <img class="h-9" src="yofte-assets/logos/yofte-logo-white.svg" alt="">
        </a>
        <h2 class="mb-5 text-4xl md:text-5xl text-white font-bold font-heading">Join Our Newsletter</h2>
        <p class="mb-6 text-blue-100">Sign me up for Yofte newsletters to get exclusive perks.</p>
        <img class="mb-12 inline-block" src="yofte-assets/elements/quote.svg" alt="">
        <div class="relative max-w-xl mx-auto bg-white rounded-lg">
          <img class="absolute top-0 right-0 h-40 -mt-12 -mr-20" src="yofte-assets/elements/quote-light.png" alt="">
          <div class="relative lg:max-w-xl lg:mx-auto bg-white rounded-lg">
            <div class="relative flex flex-wrap items-center justify-between">
              <div class="relative flex-1">
                <span class="absolute top-0 left-0 ml-8 mt-4 font-semibold font-heading text-xs text-gray-400">Drop your e-mail</span>
                <input class="inline-block w-full pt-8 pb-4 px-8 placeholder-gray-900 border-0 focus:ring-transparent focus:outline-none rounded-md" type="text" placeholder="steven@example.dev">
              </div>
              <a class="inline-block w-auto bg-blue-800 hover:bg-blue-900 text-white font-bold font-heading py-6 px-8 rounded-md uppercase text-center" href="#">Join</a>
            </div>
          </div>
        </div>
      </div>

<section class="section is-clipped">
  <div class="container">
    <div class="has-mw-4xl mx-auto is-relative">
      <div class="-ml-12 -mr-12 mt-24 mb-24 is-absolute is-top-0 is-bottom-0 is-left-0 is-right-0 has-background-light"></div>
      <div class="px-8 pt-20 pb-32 is-relative has-background-info has-text-centered">
        <a class="mb-14 is-inline-block" href="#">
          <img class="image" src="yofte-assets/logos/yofte-logo-white.svg" alt="">
        </a>
        <h2 class="title has-text-white mb-2">Join Our Newsletter</h2>
        <p class="subtitle has-text-light mb-6">Sign me up for Yofte newsletters to get exclusive perks.</p>
        <img class="mb-12 image is-block mx-auto" src="yofte-assets/elements/quote.svg" alt="">
        <div class="has-mw-xl mx-auto is-relative">
          <img class="-mt-12 -mr-20 is-absolute is-top-0 is-right-0 image" style="height: 160px;" src="yofte-assets/elements/quote-light.png" alt="">
          <div class="field has-addons">
            <div class="control is-relative" style="width: 100%">
              <input class="input has-background-white" type="text" placeholder="john@example.com">
            </div>
            <div class="control"><a class="button is-dark" href="#">Join</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20 bg-light overflow-hidden">
  <div class="container">
    <div class="position-relative mw-4xl mx-auto">
      <div class="position-absolute top-50 start-0 end-0 translate-middle-y bg-info-light ms-n12 me-n12" style="height: 90%;"></div>
      <div class="position-relative pt-20 pb-32 px-8 bg-info text-center"><a class="d-inline-block mb-14" href="#" ><img class="img-fluid" src="yofte-assets/logos/yofte-logo-white.svg" alt=""/></a>
        <h2 class="mb-5 text-white" >Join Our Newsletter</h2>
        <p class="mb-6 text-light" >Sign me up for Yofte newsletters to get exclusive perks.</p><img class="mb-12 img-fluid" src="yofte-assets/elements/quote.svg" alt=""/>
        <div class="position-relative mw-xl mx-auto bg-white rounded-3"><img class="position-absolute top-0 end-0 mt-n12 me-n20" style="height: 160px;" src="yofte-assets/elements/quote-light.png" alt=""/>
          <div class="position-relative mw-lg-xl mx-lg-auto bg-white rounded-3">
            <div class="position-relative row align-items-center justify-content-between">
              <div class="position-relative col-12 col-md-9"><span class="position-absolute top-0 start-0 ms-11 mt-4 small lh-sm text-muted fw-bold" >Drop your e-mail</span>
                <input class="form-control w-100 pt-8 pb-4 px-8 border-0" type="text" placeholder="john@example.com"/>
              </div>
              <div class="col-12 col-md-auto"><a class="btn btn-dark d-block text-uppercase" href="#" >Join</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>