Bootstrap Sign In / Sign Up Components

<section class="position-relative bg-secondary-dark py-24 py-md-40 overflow-hidden">
  <img class="d-none d-lg-block position-absolute top-50 start-0 w-100 translate-middle-y img-fluid" src="zospace-assets/lines/line-mountain.svg" alt="">
  <img class="d-lg-none position-absolute top-0 start-0 mt-20 w-100 img-fluid" src="zospace-assets/lines/line-mountain.svg" alt="">
  <div class="container position-relative">
    <div class="row align-items-center">
      <div class="col-12 col-lg-6 mb-16 mb-lg-0">
        <div class="mw-md mx-auto">
          <span class="h6 text-primary">Register Account</span>
          <h2 class="h3 text-white mt-10 mb-14">Start creating a new template by selecting UI components</h2>
          <p class="text-secondary-light">
            <span>The brown fox jumps over</span>
            <span class="text-white">the lazy dog.</span>
          </p>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="mw-md mx-auto pt-20 pb-24 px-8 px-md-12 px-xl-14 rounded bg-secondary">
          <form action="#">
            <h3 class="h5 text-white mb-10">Register Account</h3>
            <div class="position-relative mb-4 ps-14 py-2 pe-4 bg-white rounded-pill">
              <div class="position-absolute top-50 start-0 ms-8 translate-middle-y pe-4 py-1 border-end">
                <svg width="20" height="21" viewbox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.29593 0.492188C4.81333 0.492188 2.80078 2.50474 2.80078 4.98734C2.80078 7.46993 4.81333 9.48248 7.29593 9.48248C9.77851 9.48248 11.7911 7.46993 11.7911 4.98734C11.7911 2.50474 9.77851 0.492188 7.29593 0.492188ZM3.69981 4.98734C3.69981 3.00125 5.30985 1.39122 7.29593 1.39122C9.28198 1.39122 10.892 3.00125 10.892 4.98734C10.892 6.97342 9.28198 8.58346 7.29593 8.58346C5.30985 8.58346 3.69981 6.97342 3.69981 4.98734Z" fill="black"></path>
                  <path d="M5.3126 10.3816C2.38448 10.3816 0.103516 13.0524 0.103516 16.2253V19.8214C0.103516 20.0696 0.304772 20.2709 0.55303 20.2709H14.0385C14.2867 20.2709 14.488 20.0696 14.488 19.8214C14.488 19.5732 14.2867 19.3719 14.0385 19.3719H1.00255V16.2253C1.00255 13.4399 2.98344 11.2806 5.3126 11.2806H9.27892C10.5443 11.2806 11.6956 11.9083 12.4939 12.9335C12.6465 13.1293 12.9289 13.1644 13.1248 13.0119C13.3207 12.8594 13.3558 12.5769 13.2033 12.381C12.2573 11.1664 10.8566 10.3816 9.27892 10.3816H5.3126Z" fill="black"></path>
                  <rect x="15" y="15" width="5" height="1" rx="0.5" fill="black"></rect><rect x="17" y="18" width="5" height="1" rx="0.5" transform="rotate(-90 17 18)" fill="black"></rect>
                </svg>
              </div>
              <div class="form-floating ms-4">
                <input class="form-control border-0 bg-transparent" type="email" id="" placeholder="Your email" value="">
                <label for="">Your email</label>
              </div>
            </div>
            <div class="position-relative mb-4 ps-14 py-2 pe-4 bg-white rounded-pill">
              <div class="position-absolute top-50 start-0 ms-8 translate-middle-y pe-4 py-1 border-end">
                <svg width="17" height="21" viewbox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M15.184 8.48899H15.2011V6.25596C15.2011 2.6897 12.3193 0 8.49924 0C4.67919 0 1.7974 2.6897 1.7974 6.25596V8.48899H1.81568C0.958023 9.76774 0.457031 11.3049 0.457031 12.9569C0.457031 17.3921 4.06482 21 8.49924 21C12.9341 21 16.5424 17.3922 16.5428 12.9569C16.5428 11.3049 16.0417 9.76774 15.184 8.48899ZM2.69098 6.25596C2.69098 3.14895 5.13312 0.893578 8.49924 0.893578C11.8654 0.893578 14.3075 3.14895 14.3075 6.25596V7.39905C12.8423 5.86897 10.7804 4.91468 8.49966 4.91468C6.21837 4.91468 4.15607 5.86946 2.69098 7.40017V6.25596ZM8.49966 20.1064C4.55762 20.1064 1.35061 16.8989 1.35061 12.9569C1.35061 9.01534 4.5572 5.80826 8.49924 5.80826C12.4422 5.80826 15.6488 9.01534 15.6492 12.9569C15.6492 16.8989 12.4426 20.1064 8.49966 20.1064Z" fill="black"></path>
                  <path d="M8.49957 8.93567C7.26775 8.93567 6.26562 9.93779 6.26562 11.1696C6.26562 11.8679 6.60247 12.5283 7.1592 12.9474V14.7439C7.1592 15.4829 7.76062 16.0843 8.49957 16.0843C9.2381 16.0843 9.83994 15.4829 9.83994 14.7439V12.9474C10.3966 12.5278 10.7335 11.8679 10.7335 11.1696C10.7335 9.93779 9.7309 8.93567 8.49957 8.93567ZM9.16793 12.3228C9.03032 12.4023 8.94636 12.5502 8.94636 12.7088V14.7439C8.94636 14.9906 8.74572 15.1907 8.49957 15.1907C8.25342 15.1907 8.05278 14.9906 8.05278 14.7439V12.7088C8.05278 12.5502 7.96833 12.4032 7.83072 12.3228C7.41026 12.078 7.1592 11.6468 7.1592 11.1696C7.1592 10.4307 7.76062 9.82925 8.49957 9.82925C9.2381 9.82925 9.83994 10.4307 9.83994 11.1696C9.83994 11.6468 9.58881 12.078 9.16793 12.3228Z" fill="black"></path>
                </svg>
              </div>
              <div class="form-floating ms-4">
                <input class="form-control border-0 bg-transparent" type="password" placeholder="Password" id="" value="">
                <label for="">Password</label>
              </div>
            </div>
            <div class="position-relative mb-6 ps-14 py-2 pe-4 bg-white rounded-pill">
              <div class="position-absolute top-50 start-0 ms-8 translate-middle-y pe-4 py-1 border-end">
                <svg width="18" height="21" viewbox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.6243 13.5625C14.3939 13.5625 14.2077 13.7581 14.2077 14V16.4517C14.2077 18.2573 13.0443 20.125 11.0973 20.125H4.42975C2.56848 20.125 0.874349 18.3741 0.874349 16.4517V10.5H14.6243C14.8547 10.5 15.041 10.3044 15.041 10.0625C15.041 9.82058 14.8547 9.625 14.6243 9.625H14.2077V5.95175C14.2077 2.39183 11.8635 0 8.37435 0H6.70768C3.21855 0 0.874349 2.39183 0.874349 5.95175V9.625H0.457682C0.227282 9.625 0.0410156 9.82058 0.0410156 10.0625V16.4517C0.0410156 18.8322 2.13268 21 4.42975 21H11.0972C13.3089 21 15.0409 19.0023 15.0409 16.4517V14C15.041 13.7581 14.8547 13.5625 14.6243 13.5625ZM1.70768 5.95175C1.70768 2.86783 3.67022 0.875 6.70768 0.875H8.37435C11.4119 0.875 13.3743 2.86783 13.3743 5.95175V9.625H1.70768V5.95175Z" fill="black"></path>
                  <path d="M17.8815 9.3711C17.7482 9.17377 17.4878 9.12827 17.3003 9.26701L7.58655 16.4919L5.75235 14.5655C5.58942 14.3944 5.32608 14.3944 5.16322 14.5655C5.00028 14.7366 5.00028 15.0131 5.16322 15.1842L7.24655 17.3717C7.32695 17.4561 7.43362 17.4999 7.54115 17.4999C7.62488 17.4999 7.70868 17.4732 7.78282 17.4194L17.7828 9.98185C17.9703 9.84143 18.0141 9.56843 17.8815 9.3711Z" fill="black"></path>
                </svg>
              </div>
              <div class="form-floating ms-4">
                <input class="form-control border-0 bg-transparent" type="password" id="" placeholder="Repeat password" value="">
                <label for="">Repeat password</label>
              </div>
            </div>
            <div class="form-check mb-12">
              <input class="form-check-input" type="checkbox" value="" id="">
              <label class="form-check-label small text-secondary-light">
                <span>By singning up, you agree to our</span>
                <a class="d-inline-block text-decoration text-white" href="#">Terms, Data Policy</a>
                <span>and</span>
                <a class="d-inline-block text-decoration text-white" href="#">Cookies.</a>
              </label>
            </div>
            <button class="btn btn-primary w-100" type="submit">Get started</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>