Sign In / Sign Up Components in Nightsable library

<section class="overflow-hidden">
  <div class="flex flex-wrap -m-8">
    <div class="w-full md:w-1/2 p-8">
      <div class="px-4 pt-10 md:pb-40 max-w-lg mx-auto">
        <a class="inline-block mb-36" href="#">
          <img src="nightsable-assets/logos/logo.svg" alt="">
        </a>
        <div class="text-center mx-auto">
          <h3 class="mb-4 text-5xl text-white tracking-5xl">Log in to your account</h3>
          <p class="mb-10 text-gray-300">Good to have you back!</p>
          <div class="flex flex-wrap -1 mb-7">
            <div class="w-full p-1">
              <a class="p-5 flex flex-wrap justify-center bg-gray-900 hover:bg-gray-900 bg-opacity-30 hover:bg-opacity-10 rounded-full transition duration-300" href="#">
                <div class="mr-4 inline-block">
                  <img src="nightsable-assets/images/sign-in/google.svg" alt="">
                </div>
                <span class="text-sm text-white font-medium">Sign in with Google</span>
              </a>
            </div>
            <div class="w-full p-1">
              <a class="p-5 flex flex-wrap justify-center bg-gray-900 hover:bg-gray-900 bg-opacity-30 hover:bg-opacity-10 rounded-full transition duration-300" href="#">
                <div class="mr-4 inline-block">
                  <img src="nightsable-assets/images/sign-in/apple-logo.svg" alt="">
                </div>
                <span class="text-sm text-white font-medium">Sign in with Apple</span>
              </a>
            </div>
          </div>
          <div class="flex flex-wrap items-center mb-10">
            <div class="flex-1 bg-gray-900">
              <div class="h-px"></div>
            </div>
            <div class="px-5 text-xs text-gray-300 font-medium">or sign in with email</div>
            <div class="flex-1 bg-gray-900">
              <div class="h-px"></div>
            </div>
          </div>
          <div class="mb-6 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="Enter your email">
          </div>
          <a class="block mb-6 px-14 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Log in</a>
          <p class="text-gray-300">
            <span>Dont have an account?</span>
            <a class="underline" href="#">Sign up</a>
          </p>
        </div>
      </div>
    </div>
    <div class="w-full md:w-1/2 p-8">
      <div class="flex flex-wrap items-center justify-center h-full bg-gradient-radial-dark py-16 px-4">
        <div class="w-full mb-8">
          <img class="mx-auto" src="nightsable-assets/images/sign-in/stats.png" alt="">
        </div>
        <div class="w-full">
          <p class="mb-8 text-sm text-center text-gray-300">Trusted by</p>
          <div class="flex flex-wrap items-center justify-center -m-4">
            <div class="w-auto p-4">
              <img src="nightsable-assets/images/sign-in/netflix.svg" alt="">
            </div>
            <div class="w-auto p-4">
              <img src="nightsable-assets/images/sign-in/allianz.svg" alt="">
            </div>
            <div class="w-auto p-4">
              <img src="nightsable-assets/images/sign-in/spotify.svg" alt="">
            </div>
            <div class="w-auto p-4">
              <img src="nightsable-assets/images/sign-in/uber.svg" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="bg-black position-relative overflow-hidden">
  <div class="d-none d-lg-block position-absolute top-0 end-0 col-6 h-100 bg-dark bg-opacity-10 text-center pt-52 pb-12" style="background: radial-gradient(72.2% 78.49% at 49.87% 50.1%, rgba(71, 80, 98, 0.26) 0%, rgba(137, 137, 137, 0.00) 100%);"><img class="d-block mx-auto mb-40 img-fluid" src="nightsable-assets/images/sign-in/stats.png" alt=""><span class="d-block fs-9 text-secondary-light mb-8">Trusted by</span>
    <div class="d-flex align-items-center justify-content-center gap-8"><img class="img-fluid" src="nightsable-assets/images/sign-in/netflix.svg" alt=""><img class="img-fluid" src="nightsable-assets/images/sign-in/allianz.svg" alt=""><img class="img-fluid" src="nightsable-assets/images/sign-in/spotify.svg" alt=""><img class="img-fluid" src="nightsable-assets/images/sign-in/uber.svg" alt=""></div>
  </div>
  <div class="container position-relative">
    <div class="mw-md mx-auto mx-lg-0 pt-10 pb-20 pb-lg-32"><a class="btn mb-32 p-0" href="#"><img class="img-fluid" src="nightsable-assets/logos/logo.svg" alt=""></a>
      <div class="text-center">
        <h4 class="mb-4" style="letter-spacing: -0.1rem;">Let`s Get Started</h4><span class="d-block text-secondary-light mb-10">Now create your account!</span>
        <form action=""><a class="btn mb-2 w-100 bg-dark bg-opacity-50" href="#"><img class="img-fluid" src="nightsable-assets/images/sign-in/google.svg" alt=""><span class="ms-4 fw-medium">Sign up with Google</span></a><a class="btn w-100 bg-dark bg-opacity-50" href="#"><img class="img-fluid" src="nightsable-assets/images/sign-in/apple-logo.svg" alt=""><span class="ms-4 fw-medium">Sign up with Apple</span></a>
          <div class="d-flex mt-8 mb-10 align-items-center">
            <div class="w-100 border-top"></div><span class="d-inline-block flex-shrink-0 mx-5 fs-10 fw-medium text-secondary-light">or sign in with email</span>
            <div class="w-100 border-top"></div>
          </div>
          <input class="form-control bg-transparent mb-6" type="email" placeholder="Enter your email">
          <button class="btn btn-primary mb-6 w-100 fw-medium" type="submit">Sign up</button>
          <p class="d-flex align-items-center justify-content-center"><span class="text-secondary-light">Dont have an account?</span><a class="btn ms-1 p-0 text-decoration-underline" href="#"> Sign up</a></p>
        </form>
      </div>
    </div>
  </div>
  <div class="d-lg-none bg-dark bg-opacity-10 text-center pt-24 pb-12" style="background: radial-gradient(72.2% 78.49% at 49.87% 50.1%, rgba(71, 80, 98, 0.26) 0%, rgba(137, 137, 137, 0.00) 100%);"><img class="d-block mx-auto mb-40 img-fluid" src="nightsable-assets/images/sign-in/stats.png" alt=""><span class="d-block fs-9 text-secondary-light mb-8">Trusted by</span>
    <div class="d-flex align-items-center justify-content-center gap-8"><img class="img-fluid" src="nightsable-assets/images/sign-in/netflix.svg" alt=""><img class="img-fluid" src="nightsable-assets/images/sign-in/allianz.svg" alt=""><img class="img-fluid" src="nightsable-assets/images/sign-in/spotify.svg" alt=""><img class="img-fluid" src="nightsable-assets/images/sign-in/uber.svg" alt=""></div>
  </div>
</section>