Sign In / Sign Up Components in Wrexa library

<section class="py-40 bg-gray-100">
  <div class="container px-4 mx-auto">
    <div class="max-w-7xl mx-auto pt-8 px-6 sm:px-10 pb-36 bg-white rounded-2xl">
      <div class="flex flex-col sm:flex-row mb-16 sm:mb-28 items-end sm:items-center justify-end">
        <span class="sm:mr-4 text-sm text-gray-800 font-light">I already have an account</span>
        <a class="inline-flex items-center font-medium text-green-900 hover:text-green-800" href="#">
          <span class="mr-2">Sign in</span>
          <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
      <div class="lg:px-20">
        <h2 class="font-heading text-4xl mb-16">Sign up to Wrexa</h2>
        <div class="max-w-md lg:max-w-2xl 3xl:max-w-4xl mx-auto">
          <form action="#" method="post">
            <div class="flex flex-wrap -mx-4 mb-12">
              <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-0">
                <div class="relative">
                  <input class="block w-full px-10 py-6 bg-white focus:bg-lime-100 outline-none border border-gray-300 rounded-lg" type="email" placeholder="mat@hello.dev" value="">
                  <label class="absolute top-0 left-0 ml-10 mt-3 text-xs font-normal text-gray-400" for="">Your email</label>
                </div>
              </div>
              <div class="w-full lg:w-1/2 px-4">
                <input class="block w-full px-10 py-6 outline-none bg-white focus:bg-lime-100 border border-gray-300 rounded-lg" type="email" placeholder="Your email" value="">
              </div>
            </div>
            <div class="sm:flex items-center mb-16">
              <a class="flex items-center text-gray-800 hover:text-gray-700" href="#">
                <img class="w-5 h-5 mr-6" src="wrexa-assets/logos/brands/google.svg" alt="">
                <span class="text-sm font-light">Sign Up with Google</span>
              </a>
              <div class="w-px h-3 my-4 sm:my-0 mx-8 bg-gray-300"></div>
              <a class="flex items-center text-gray-800 hover:text-gray-700" href="#">
                <img class="w-5 h-5 mr-6" src="wrexa-assets/logos/brands/facebook.svg" alt="">
                <span class="text-sm font-light">Sign Up with Facebook</span>
              </a>
            </div>
            <div class="text-center">
              <button class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" type="submit">Create Account</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative py-24 py-xl-40 bg-light">
  <div class="container">
    <div class="pt-8 pb-32 bg-white rounded">
      <div class="d-flex flex-column flex-sm-row mb-16 mb-md-24 px-6 px-md-12 justify-content-end align-items-end align-items-sm-center"><span class="small text-secondary-dark mb-4 mb-sm-0 me-sm-4" >I already have an account</span><a class="btn p-0 d-flex align-items-center text-success" href="#"><span class="me-3" >Sign in</span>
          <svg width="14" height="11" viewbox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
          </svg></a></div>
      <div class="px-6 px-md-16 px-lg-24">
        <h2 class="display-5 mb-16" >Sign up to Wrexa</h2>
        <div class="mw-sm mw-md-none mx-auto px-md-12 px-lg-24">
          <form action="#" method="post">
            <div class="row mb-12">
              <div class="col-12 col-md-6 mb-6 mb-md-0">
                <div class="form-floating">
                  <input class="form-control" type="email" placeholder="support@shuffle.dev" value=""/>
                  <label for="" >Your email</label>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="form-floating">
                  <input class="form-control" type="text" placeholder="Your name"/>
                  <label for="" >Your name</label>
                </div>
              </div>
            </div>
            <div class="d-md-flex mb-16 align-items-center"><a class="d-flex align-items-center text-decoration-none" href="#"><img class="img-fluid me-6" style="width: 22px;" src="wrexa-assets/logos/brands/google.svg" alt=""/><span class="small text-secondary-dark" >Sign Up with Google</span></a>
              <div class="d-none d-md-block mx-8 bg-secondary" style="width: 1px; height: 12px;"></div>
              <div class="d-md-none ms-1 my-8 bg-secondary" style="width: 12px; height: 1px;"></div><a class="d-flex align-items-center text-decoration-none" href="#"><img class="img-fluid me-6" src="wrexa-assets/logos/brands/facebook.svg" alt=""/><span class="small text-secondary-dark" >Sign Up with Facebook</span></a>
            </div>
            <div class="text-center">
              <button class="btn btn-primary" type="submit" >Create Account</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>