Sign In / Sign Up Components in Mirga library

<section class="bg-neutral-50 py-12 md:py-24">
  <div class="container mx-auto px-4">
    <div class="bg-white rounded-3xl">
      <div class="flex flex-wrap">
        <div class="w-full xl:w-1/2">
          <div class="px-8 md:px-16 pt-16 pb-20">
            <form action="#">
              <span class="inline-block text-neutral-600 text-xl font-semibold tracking-tight mb-4">Account</span>
              <h5 class="text-6xl font-semibold mb-6 font-heading">Try a demo for free</h5>
              <p class="text-neutral-600 font-medium tracking-tight mb-16">At the heart of our success is a diverse and talented team.</p>
              <a class="flex justify-center items-center text-center w-full mb-6 p-4 font-semibold tracking-tight hover:text-white border border-neutral-900 bg-white hover:bg-neutral-900 focus:bg-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">
                <img class="mr-6 h-8" src="mirga-assets/images/sign-in/google.svg" alt="">
                <span>Continue with Google</span>
              </a>
              <p class="text-center text-neutral-600 font-medium tracking-tight mb-4">OR</p>
              <label class="block mb-3 text-neutral-600 font-medium tracking-tight" for="name">Your Name</label>
              <div class="flex flex-wrap -m-3 mb-3">
                <div class="w-full p-3">
                  <input class="w-full px-8 py-5 outline-none rounded-lg border border-neutral-100 placeholder-neutral-300 font-medium focus:ring-4 focus:ring-neutral-100 transition duration-200" id="name" type="text" placeholder="ex. d.duncan@email.com">
                </div>
                <div class="w-full p-3">
                  <button class="flex justify-center items-center text-center h-full w-full p-5 font-semibold tracking-tight text-lg text-white bg-neutral-900 hover:bg-neutral-800 focus:bg-neutral-800 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" type="submit">Register now</button>
                </div>
              </div>
              <a class="inline-block text-neutral-600 text-sm font-medium hover:text-neutral-800 tracking-tight transition duration-200" href="#">Already have an account? Log in</a>
            </form>
          </div>
        </div>
        <div class="w-full xl:w-1/2">
          <div class="bg-orange-500 rounded-3xl relative h-full">
            <img class="w-full h-full mix-blend-screen rounded-3xl" src="mirga-assets/images/sign-in/gradient.png" alt="">
            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-xs md:max-w-md">
              <div class="bg-white rounded-5xl px-4 md:px-10 pt-6 md:pt-12 pb-8 md:pb-16">
                <img class="mb-4" src="mirga-assets/images/logos/mirga-dark-logo.svg" alt="">
                <p class="text-neutral-400 font-medium tracking-tight mb-10">Shape Tomorrow with Digital Learning Today!</p>
                <img class="mx-auto" src="mirga-assets/images/sign-in/picture1.png" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-16 bg-light bg-opacity-25 overflow-hidden">
  <div class="container mw-2xl mw-lg-7xl">
    <div class="bg-white rounded-5 overflow-hidden">
      <div class="row">
        <div class="col-12 col-lg-6 pt-16 px-8 px-sm-16 pb-20">
          <div>
            <span class="d-block fs-6 fw-semibold mb-4">Account</span>
            <h3 class="fs-1 mb-6">Try a demo for free</h3>
            <p class="lead fs-8 mb-16">At the heart of our success is a diverse and talented team.</p>
            <form action="">
              <a class="btn mb-6 w-100 py-4 btn-outline-primary" href="#">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_231_2117)">
                    <path d="M31.9994 16.3674C31.9994 15.2797 31.9094 14.1862 31.7175 13.1162H16.3203V19.2775H25.1376C24.7717 21.2647 23.596 23.0225 21.8746 24.1395V28.1373H27.1349C30.224 25.3506 31.9994 21.2353 31.9994 16.3674Z" fill="#4285F4"></path>
                    <path d="M16.3218 32C20.7244 32 24.4373 30.5831 27.1424 28.1374L21.8821 24.1396C20.4185 25.1155 18.5291 25.6682 16.3278 25.6682C12.0691 25.6682 8.45827 22.8521 7.16268 19.0659H1.73438V23.1872C4.50551 28.5901 10.1497 32 16.3218 32Z" fill="#34A853"></path>
                    <path d="M7.15486 19.0661C6.47107 17.079 6.47107 14.9272 7.15486 12.9401V8.81885H1.73255C-0.582725 13.3399 -0.582725 18.6664 1.73255 23.1874L7.15486 19.0661Z" fill="#FFD805"></path>
                    <path d="M16.3218 6.3319C18.6491 6.29663 20.8984 7.15498 22.5839 8.73058L27.2444 4.16251C24.2933 1.44636 20.3766 -0.0469312 16.3218 0.000101659C10.1497 0.000101659 4.50551 3.40999 1.73438 8.81877L7.15668 12.94C8.44628 9.148 12.0631 6.3319 16.3218 6.3319Z" fill="#FF3F00"></path>
                  </g>
                </svg>
                <span class="ms-5">Continue with Google</span>
              </a>
              <span class="d-block mb-4 text-center fw-medium">OR</span>
              <div class="mb-6">
                <label class="form-label fw-medium text-muted" for="">Your Name</label>
                <input class="form-control" type="email" name="" id="" placeholder="ex. d.duncan@email.com">
              </div>
              <button class="btn btn-lg py-4 mb-6 btn-primary w-100" type="submit">Register now</button>
              <p class="d-flex align-items-center text-muted fs-9 fw-medium mb-0">
                <span class="me-1">Already have an account?</span>
                <a class="btn text-muted border-0 p-0" href="#">Log in</a>
              </p>
            </form>
          </div>
        </div>
        <div class="col-12 col-lg-6 p-0">
          <div class="d-flex align-items-center justify-content-center h-100 p-12 bg-danger rounded-4">
            <div class="mw-sm py-12 px-10 bg-white rounded-4">
              <img class="d-block mb-3 img-fluid" src="mirga-assets/images/logos/mirga-dark-logo.svg" alt="">
              <p class="fw-medium text-muted mb-6">Shape Tomorrow with Digital Learning Today!</p>
              <img class="d-block mx-auto img-fluid" src="mirga-assets/images/sign-in/picture1.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>