Modals Components in Acros library

<section class="py-12 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="max-w-4xl mx-auto p-8 bg-white rounded-md">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
          <div class="max-w-md mx-auto">
            <h2 class="max-w-xs font-heading text-3xl mb-2">Sign up to our newsletter</h2>
            <p class="max-w-xs leading-7 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <form action="">
              <div class="mb-4">
                <label class="block text-sm leading-6 mb-2" for="">Your e-mail</label>
                <input class="block w-full p-4 font-heading text-gray-300 placeholder-gray-300 bg-gray-50 rounded outline-none" type="email" placeholder="Type your email">
              </div>
              <a class="inline-block w-full py-4 px-6 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Sign in</a>
            </form>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="max-w-md mx-auto p-8 bg-green-50 rounded">
            <svg width="54" height="57" viewBox="0 0 54 57" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.30847 20.1856L4.24551 21.3569H4.24551L3.30847 20.1856ZM25.4623 2.4625L24.5253 1.29119V1.29119L25.4623 2.4625ZM28.5377 2.4625L27.6007 3.6338L27.6007 3.6338L28.5377 2.4625ZM50.6916 20.1856L51.6286 19.0143L50.6916 20.1856ZM28.6467 41.5965L27.6435 40.4813L27.6433 40.4815L28.6467 41.5965ZM25.3533 41.5965L26.3568 40.4815L26.3567 40.4815L25.3533 41.5965ZM50.1154 22.1077V50.4631H53.1154V22.1077H50.1154ZM46.6923 53.8862H7.30772V56.8862H46.6923V53.8862ZM3.88464 50.4631V22.1077H0.884644V50.4631H3.88464ZM4.24551 21.3569L26.3994 3.6338L24.5253 1.29119L2.37143 19.0143L4.24551 21.3569ZM27.6007 3.6338L49.7545 21.3569L51.6286 19.0143L29.4748 1.29119L27.6007 3.6338ZM26.3994 3.6338C26.7505 3.35286 27.2495 3.35286 27.6007 3.6338L29.4748 1.29119C28.028 0.133728 25.9721 0.133732 24.5253 1.29119L26.3994 3.6338ZM7.30772 53.8862C5.41721 53.8862 3.88464 52.3536 3.88464 50.4631H0.884644C0.884644 54.0105 3.76035 56.8862 7.30772 56.8862V53.8862ZM50.1154 50.4631C50.1154 52.3536 48.5828 53.8862 46.6923 53.8862V56.8862C50.2397 56.8862 53.1154 54.0105 53.1154 50.4631H50.1154ZM53.1154 22.1077C53.1154 20.9043 52.5684 19.7661 51.6286 19.0143L49.7545 21.3569C49.9826 21.5393 50.1154 21.8156 50.1154 22.1077H53.1154ZM3.88464 22.1077C3.88464 21.8156 4.01742 21.5394 4.24551 21.3569L2.37143 19.0143C1.43169 19.7661 0.884644 20.9043 0.884644 22.1077H3.88464ZM50.4103 20.0017L27.6435 40.4813L29.6499 42.7117L52.4166 22.2321L50.4103 20.0017ZM26.3567 40.4815L3.59958 20.0019L1.59279 22.2319L24.3499 42.7115L26.3567 40.4815ZM27.6433 40.4815C27.2776 40.8106 26.7225 40.8106 26.3568 40.4815L24.3499 42.7114C25.8565 44.0673 28.1436 44.0673 29.6502 42.7114L27.6433 40.4815ZM40.702 29.2419H13.2885V32.2419H40.702V29.2419ZM19.5185 36.0692L1.88389 51.3288L3.84694 53.5974L21.4816 38.3377L19.5185 36.0692ZM51.2396 52.8919L34.5415 36.191L32.42 38.3121L49.1181 55.013L51.2396 52.8919Z" fill="#80E5D3"></path>
            </svg>
            <div class="mt-12 sm:mt-18">
              <h5 class="font-medium mb-4">There are many variations:</h5>
              <ul>
                <li class="flex items-center mb-2">
                  <span class="flex-shrink-0">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M5.67303 10.4809L8.55765 13.3655L14.3269 7.11548" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <circle cx="9.99998" cy="10" r="8.65385" stroke="#00CBA6" stroke-width="1.5"></circle>
                    </svg>
                  </span>
                  <span class="ml-4 text-sm">It is a long established fact that a reader</span>
                </li>
                <li class="flex items-center mb-2">
                  <span class="flex-shrink-0">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M5.67303 10.4809L8.55765 13.3655L14.3269 7.11548" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <circle cx="9.99998" cy="10" r="8.65385" stroke="#00CBA6" stroke-width="1.5"></circle>
                    </svg>
                  </span>
                  <span class="ml-4 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
                </li>
                <li class="flex items-center">
                  <span class="flex-shrink-0">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M5.67303 10.4809L8.55765 13.3655L14.3269 7.11548" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <circle cx="9.99998" cy="10" r="8.65385" stroke="#00CBA6" stroke-width="1.5"></circle>
                    </svg>
                  </span>
                  <span class="ml-4 text-sm">All the Lorem Ipsum generators</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="is-fixed" style="width: 100%; height: 100%; overflow-y: auto">
  <div class="has-background-grey-darker is-absolute" style="width: 100%; height: 100%; opacity: 0.6;"></div>
  <div class="section">
    <div class="is-relative has-background-white p-8 has-mw-3xl mx-auto" style="border-radius: 6px;">
      <a class="is-absolute is-right-0 is-top-0 -mt-12 mt-0-tablet -mr-16-tablet" href="#">
        <img src="acros-assets/icons/modals/decline.svg" alt="">
      </a>
      <div class="columns is-justify-content-space-between">
        <div class="column">
          <h3 class="title is-size-3 has-mw-xs">Sign up to our newsletter</h3>
          <p class="mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="field mb-4">
            <label class="label"><small>Password</small></label>
            <div class="control">
              <input class="input" type="text" placeholder="Type your email">
            </div>
          </div>
          <div class="field">
            <div class="control">
              <button class="button is-primary is-fullwidth">Sign In</button>
            </div>
          </div>
        </div>
        <div class="column">
          <div class="is-relative p-8">
            <div class="is-absolute is-left-0 is-top-0 has-background-primary" style="border-radius: 4px; opacity: 0.1; width: 100%; height:100%;"></div>
            <img class="mb-16" src="acros-assets/icons/modals/mail-read.svg" alt="">
            <h6 class="title is-size-6 has-text-weight-medium">There are many variations:</h6>
            <ul>
              <li class="is-flex is-align-items-center mb-2">
                <img class="mr-3" src="acros-assets/icons/modals/check-circle.svg" alt="">
                <small>It is a long established fact that a reader</small>
              </li>
              <li class="is-flex is-align-items-start mb-2">
                <img class="mr-3" src="acros-assets/icons/modals/check-circle.svg" alt="">
                <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
              </li>
              <li class="is-flex is-align-items-center">
                <img class="mr-3" src="acros-assets/icons/modals/check-circle.svg" alt="">
                <small>All the Lorem Ipsum generators</small>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>