Bulma Newsletter Components

<section class="has-background-light py-24 is-clipped">
    <div class="container px-8">
        <div class="columns is-justify-content-center">
            <div class="column is-6 has-text-centered">
                <div class="mb-6 is-relative mx-auto has-background-link" style="width: 64px; height: 64px; border-radius: 50%;">
                    <img class="is-absolute is-top-0 is-left-0" src="flaro-assets/images/applications/blur.svg" alt="">
                    <div class="is-absolute" style="left: 50%; top: 50%; transform: translate(-50%, -50%);">
                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M5.00098 13.3335L18.152 22.1008C19.2716 22.8473 20.7303 22.8473 21.85 22.1008L35.001 13.3335M8.33431 31.6668H31.6676C33.5086 31.6668 35.001 30.1744 35.001 28.3335V11.6668C35.001 9.82588 33.5086 8.3335 31.6676 8.3335H8.33431C6.49336 8.3335 5.00098 9.82588 5.00098 11.6668V28.3335C5.00098 30.1744 6.49336 31.6668 8.33431 31.6668Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </div>
                </div>
                <h2 class="mb-3 title is-size-1 has-text-centered has-text-weight-bold">Join Our Newsletter</h2>
                <p class="mb-11 has-text-weight-medium has-text-grey">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condimentum vitae vel purus.</p>
                <form class="mb-9">
                    <input class="mb-5 input has-background-white has-text-dark has-text-centered" type="text" placeholder="First &amp; last name">
                    <input class="mb-5 input has-background-white has-text-dark has-text-centered" type="text" placeholder="Email address">
                    <button type="submit" class="button is-link is-fullwidth" style="border-radius: 16px;">Subscribe Now</button>
                </form>
                <div class="is-flex is-flex-wrap-wrap is-justify-content-center is-align-content-center -m-1">
                    <div class="p-1">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M8.00033 10.0002V11.3336M4.00033 14.0002H12.0003C12.7367 14.0002 13.3337 13.4033 13.3337 12.6669V8.66691C13.3337 7.93053 12.7367 7.33358 12.0003 7.33358H4.00033C3.26395 7.33358 2.66699 7.93053 2.66699 8.66691V12.6669C2.66699 13.4033 3.26395 14.0002 4.00033 14.0002ZM10.667 7.33358V4.66691C10.667 3.19415 9.47308 2.00024 8.00033 2.00024C6.52757 2.00024 5.33366 3.19415 5.33366 4.66691V7.33358H10.667Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round"></path>
                        </svg>

<section class="section py-20">
  <div class="container">
    <div class="has-background-dark px-8 px-16-desktop py-10 py-20-desktop is-rounded">
      <div class="columns py-5 is-vcentered">
        <div class="column is-7 mb-6 mb-0-desktop">
          <div class="mb-3 mb-0-desktop">
            <h3 class="mb-4 title is-3 has-text-white">Sign up to our newsletter</h3>
            <p class="is-size-5 has-text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
        <div class="col-12 col-md-5">
          <form action="#">
            <div class="is-flex is-align-items-end is-fullwidth">
              <div class="is-flex-grow-1 mr-4 mb-4 mb-0-desktop">
                <div class="is-relative">
                  <input class="input py-6 has-background-dark has-text-white" type="text" value="e.g hello@shuffle.dev">
                  <span class="is-absolute is-top-0 is-left-0 -mt-2 ml-3 has-background-dark has-text-light" style="font-size: 12px;">Your email address</span>
                </div>
              </div>
              <div>
                <button class="button is-info">Sign&nbsp;up</button>
              </div>
            </div>
          </form>

<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="section py-16">
  <div class="container">
    <div class="has-background-primary p-12 pb-14-tablet px-24-tablet" style="border-radius: 6px;">
      <div class="columns is-align-items-center">
        <div class="column mb-12 mb-0-tablet">
          <h2 class="title has-text-white mb-4 has-mw-xs">Sign up to our newsletter</h2>
          <p class="subtitle has-text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="column">
          <div class="columns">
            <div class="column">
              <div class="field">
                <div class="control">
                  <input class="input is-primary has-background-white-ter" type="text" placeholder="Type your e-mail">
                </div>
              </div>
            </div>
            <div class="column is-3">
              <div class="field">
                <div class="control">
                  <button class="button is-white">Sign up</button>
                </div>
              </div>
            </div>

<section class="section py-24 has-background-primary">
  <div class="container">
    <div class="px-8 px-16-tablet py-24 has-background-light">
      <div class="has-mw-lg has-mw-none-widescreen mx-auto">
        <div class="columns is-multiline is-vcentered">
          <div class="column is-12-tablet is-6-widescreen">
            <div>
              <h3 class="title is-size-4 has-text-primary">Sign up to our newsletter</h3>
              <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>
          <div class="column is-12-tablet is-6-widescreen">
            <div class="field has-addons has-mw-md ml-auto-widescreen">
              <div class="control is-fullwidth">
                <input class="input has-background-white" type="text" placeholder="Type your e-mail">
              </div>
              <div class="control">
                <button class="button is-warning" type="submit">Action</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

<section class="section">
  <div class="container">
    <div class="is-max-w-lg mx-auto has-text-centered">
      <h2 class="title is-spaced">
        <span>Lorem ipsum</span>
        <span class="has-text-primary">dolor sit</span>
        <span>amet, consectetur adipiscing.</span>
      </h2>
      <p class="subtitle">Integer felis tellus, rhoncus ac pulvinar vitae.</p>
      <div class="field is-grouped is-justify-content-center">
        <div class="control has-icons-left">
          <span class="icon is-small is-left">
            <svg class="image is-24x24" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor">
              <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
              <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
            </svg>
          </span>
          <input class="input" type="text" placeholder="Type your e-mail">
        </div>
        <div class="control">
          <button class="button is-primary" type="submit">Sign Up</button>
        </div>
      </div>
    </div>

<section class="section">
  <div class="container">
    <div class="px-10 px-28-desktop py-16 py-24-desktop is-relative has-background-primary">
      <img class="is-absolute is-block-tablet is-hidden-touch is-top-0 is-left-0" style="width: 88px; margin-left: -44px; margin-top: -44px;" src="cronos-assets/elements/left-squares.svg" alt="">
      <img class="is-absolute is-block-tablet is-hidden-touch is-bottom-0 is-right-0" style="width: 88px; margin-right: -44px; margin-bottom: -44px;" src="cronos-assets/elements/right-squares.svg" alt="">
      <div class="is-vcentered columns is-multiline">
        <div class="column is-12 is-7-desktop mb-6 mb-0-desktop">
          <h3 class="has-text-white mb-4 title is-size-3 is-spaced">Sign up to our newsletter</h3>
          <p class="has-text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="column is-12 is-5-desktop ml-auto">
          <form action="#">
            <div class="is-flex is-align-items-center">
              <div class="control">
                <input class="input" type="email" placeholder="E-mail address">
              </div>
              <button class="button py-0 is-warning">Sign Up</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="box p-6 has-background-light">
      <div class="is-vcentered columns is-multiline">
        <div class="column is-8-desktop mb-3">
          <div>
            <h3 class="is-size-2 is-size-3-mobile mb-2 has-text-weight-bold">Sign up to our newsletter</h3>
            <p class="has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
        <div class="column is-4-desktop">
          <form action="#">
            <div class="is-flex">
              <div class="control mr-2 is-flex-grow-1">
                <input class="input" type="email" placeholder="Type your e-mail">
              </div>
              <button class="button is-primary">Action</button>
            </div>
          </form>
        </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="">