Sign In / Sign Up Components in Filytreck library

<section class="relative">
    <img class="absolute top-0 left-0 w-full h-36 md:w-1/2 md:h-full object-cover" src="fily-assets/sign-up/pic.jpg" alt="">
    <div class="relative container mx-auto px-4">
        <div class="flex flex-wrap">
            <div class="w-full md:w-1/2">
                <div class="pt-16 pb-14 h-full">
                    <div class="flex flex-col items-start justify-between h-full">
                        <img class="mb-16 h-9" src="fily-assets/logos/fily-treck-white-logo.svg" alt="">
                        <h3 class="font-heading text-3xl text-black md:text-white font-bold">Imagination is more important than knowledge because knowledge is limited.</h3>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2">
                <div class="pt-16 md:pt-32 pb-36 md:px-10 h-full">
                    <form action="#" class="max-w-lg mx-auto">
                        <h2 class="mb-12 font-heading text-4xl font-medium">Register an account</h2>
                        <div class="flex flex-wrap -m-3 mb-7">
                            <div class="w-full p-3">
                                <label for="signup-input-01-1" class="mb-2 inline-block text-sm font-medium">Email</label>
                                <input id="signup-input-01-1" type="text" placeholder="Enter your email" class="w-full px-6 h-14 bg-transparent font-semibold text-black placeholder-gray-500 outline-none border border-gray-100 focus:ring-4 focus:ring-blue-200 rounded-full transition duration-200">
                            </div>
                            <div class="w-full p-3">
                                <div class="relative">
                                    <label for="signup-input-01-2" class="mb-2 inline-block text-sm font-medium">Password</label>
                                    <div class="relative" x-data="{ visible: false }">
                                        <input id="signup-input-01-2" :type="visible ? 'text': 'password'" type="password" placeholder="Your password" class="w-full px-6 pr-12 h-14 bg-transparent font-semibold text-black placeholder-gray-500 outline-none border border-gray-100 focus:ring-4 focus:ring-blue-200 rounded-full transition duration-200">
                                        <div x-on:click="visible = !visible" class="absolute right-6 top-1/2 transform -translate-y-1/2">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                                <g clip-path="url(#clip0_447_91)">
                                                    <path d="M17.4527 7.06424C16.2894 5.16974 13.6434 1.99124 8.99943 1.99124C4.35543 1.99124 1.70943 5.16974 0.546178 7.06424C0.186574 7.64587 -0.00390625 8.31617 -0.00390625 8.99999C-0.00390625 9.68381 0.186574 10.3541 0.546178 10.9357C1.70943 12.8302 4.35543 16.0087 8.99943 16.0087C13.6434 16.0087 16.2894 12.8302 17.4527 10.9357C17.8123 10.3541 18.0028 9.68381 18.0028 8.99999C18.0028 8.31617 17.8123 7.64587 17.4527 7.06424ZM16.1739 10.1505C15.1749 11.775 12.9137 14.5087 8.99943 14.5087C5.08518 14.5087 2.82393 11.775 1.82493 10.1505C1.61128 9.80478 1.49812 9.4064 1.49812 8.99999C1.49812 8.59359 1.61128 8.19521 1.82493 7.84949C2.82393 6.22499 5.08518 3.49124 8.99943 3.49124C12.9137 3.49124 15.1749 6.22199 16.1739 7.84949C16.3876 8.19521 16.5007 8.59359 16.5007 8.99999C16.5007 9.4064 16.3876 9.80478 16.1739 10.1505Z" fill="#696D81"></path>
                                                    <path d="M9 5.25C8.25832 5.25 7.5333 5.46993 6.91661 5.88199C6.29993 6.29404 5.81928 6.87971 5.53545 7.56494C5.25162 8.25016 5.17736 9.00416 5.32206 9.73159C5.46675 10.459 5.8239 11.1272 6.34835 11.6517C6.8728 12.1761 7.54098 12.5333 8.26841 12.6779C8.99584 12.8226 9.74984 12.7484 10.4351 12.4645C11.1203 12.1807 11.706 11.7001 12.118 11.0834C12.5301 10.4667 12.75 9.74168 12.75 9C12.7488 8.0058 12.3533 7.05267 11.6503 6.34966C10.9473 5.64666 9.9942 5.25119 9 5.25ZM9 11.25C8.55499 11.25 8.11998 11.118 7.74997 10.8708C7.37996 10.6236 7.09157 10.2722 6.92127 9.86104C6.75098 9.4499 6.70642 8.9975 6.79323 8.56105C6.88005 8.12459 7.09434 7.72368 7.40901 7.40901C7.72368 7.09434 8.12459 6.88005 8.56105 6.79323C8.99751 6.70642 9.44991 6.75097 9.86104 6.92127C10.2722 7.09157 10.6236 7.37996 10.8708 7.74997C11.118 8.11998 11.25 8.55499 11.25 9C11.25 9.59674 11.0129 10.169 10.591 10.591C10.169 11.0129 9.59674 11.25 9 11.25Z" fill="#696D81"></path>
                                                </g>
                                                <defs>
                                                    <clipPath id="clip0_447_91">
                                                        <rect width="18" height="18" fill="white"></rect>
                                                    </clipPath>
                                                </defs>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="inline-flex justify-center items-center text-center w-full mb-12 h-14 py-6 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Send message</button>
                        <div class="flex flex-wrap items-center gap-4 mb-12">
                            <div class="flex-1">
                                <div class="h-px bg-gray-100"></div>
                            </div>
                            <div class="w-auto">
                                <span class="text-gray-500 font-semibold">or</span>
                            </div>
                            <div class="flex-1">
                                <div class="h-px bg-gray-100"></div>
                            </div>
                        </div>
                        <a href="#" class="inline-flex justify-center items-center text-center w-full mb-4 h-14 py-6 px-10 font-semibold text-black hover:text-black focus:text-black bg-white hover:bg-gray-50 focus:bg-gray-50 border border-gray-100 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">
                            <img class="mr-3" src="fily-assets/sign-up/google-play.svg" alt="">
                            <span>Continue with Google</span>
                        </a>
                        <a href="#" class="inline-flex justify-center items-center text-center w-full mb-11 h-14 py-6 px-10 font-semibold text-black hover:text-black focus:text-black bg-white hover:bg-gray-50 focus:bg-gray-50 border border-gray-100 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">
                            <img class="mr-3" src="fily-assets/sign-up/apple.svg" alt="">
                            <span>Continue with Apple</span>
                        </a>
                        <div class="flex justify-center">
                            <span class="font-medium">Already have an account? <a href="#" class="font-semibold text-blue-500 hover:text-blue-600">Log in</a></span>
                        </div>
                    </form> 
                </div>
            </div>
        </div>
    </div>
</section>

<section class="position-relative pt-12 py-lg-24 py-xl-32 overflow-hidden">
  <div class="d-none d-lg-block position-absolute top-0 start-0 h-100 col-lg-6 col-xl-5"><img class="position-absolute top-0 start-0 w-100 h-100" style="object-fit: cover;" src="fily-assets/sign-up/pic.jpg" alt="">
    <div class="position-relative d-flex flex-column h-100 p-16"><a class="d-inline-block mb-24" href="#"><img class="img-fluid" src="fily-assets/logos/fily-treck-white-logo.svg" alt=""></a>
      <div class="mw-2xl mt-auto">
        <p class="fs-4 fw-bold text-white">Imagination is more important than knowledge because knowledge is limited.</p>
      </div>
    </div>
  </div>
  <div class="mw-8xl mx-auto px-5">
    <div class="mw-md mw-xl-lg mx-auto me-lg-0">
      <h3 class="font-heading fw-medium mb-12">Register an account</h3>
      <form action="">
        <div class="mb-6">
          <label class="mb-1 fs-9 fw-medium" for="">Email</label>
          <input class="form-control fs-8 text-white bg-transparent border border-light" type="email" placeholder="Enter your email">
        </div>
        <div class="mb-10">
          <label class="mb-1 fs-9 fw-medium" for="">Password</label>
          <div class="position-relative">
            <button class="position-absolute top-50 end-0 me-6 translate-middle-y btn p-0 border-0">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_447_91)">
                  <path d="M17.4527 7.06424C16.2894 5.16974 13.6434 1.99124 8.99943 1.99124C4.35543 1.99124 1.70943 5.16974 0.546178 7.06424C0.186574 7.64587 -0.00390625 8.31617 -0.00390625 8.99999C-0.00390625 9.68381 0.186574 10.3541 0.546178 10.9357C1.70943 12.8302 4.35543 16.0087 8.99943 16.0087C13.6434 16.0087 16.2894 12.8302 17.4527 10.9357C17.8123 10.3541 18.0028 9.68381 18.0028 8.99999C18.0028 8.31617 17.8123 7.64587 17.4527 7.06424ZM16.1739 10.1505C15.1749 11.775 12.9137 14.5087 8.99943 14.5087C5.08518 14.5087 2.82393 11.775 1.82493 10.1505C1.61128 9.80478 1.49812 9.4064 1.49812 8.99999C1.49812 8.59359 1.61128 8.19521 1.82493 7.84949C2.82393 6.22499 5.08518 3.49124 8.99943 3.49124C12.9137 3.49124 15.1749 6.22199 16.1739 7.84949C16.3876 8.19521 16.5007 8.59359 16.5007 8.99999C16.5007 9.4064 16.3876 9.80478 16.1739 10.1505Z" fill="#696D81"></path>
                  <path d="M9 5.25C8.25832 5.25 7.5333 5.46993 6.91661 5.88199C6.29993 6.29404 5.81928 6.87971 5.53545 7.56494C5.25162 8.25016 5.17736 9.00416 5.32206 9.73159C5.46675 10.459 5.8239 11.1272 6.34835 11.6517C6.8728 12.1761 7.54098 12.5333 8.26841 12.6779C8.99584 12.8226 9.74984 12.7484 10.4351 12.4645C11.1203 12.1807 11.706 11.7001 12.118 11.0834C12.5301 10.4667 12.75 9.74168 12.75 9C12.7488 8.0058 12.3533 7.05267 11.6503 6.34966C10.9473 5.64666 9.9942 5.25119 9 5.25ZM9 11.25C8.55499 11.25 8.11998 11.118 7.74997 10.8708C7.37996 10.6236 7.09157 10.2722 6.92127 9.86104C6.75098 9.4499 6.70642 8.9975 6.79323 8.56105C6.88005 8.12459 7.09434 7.72368 7.40901 7.40901C7.72368 7.09434 8.12459 6.88005 8.56105 6.79323C8.99751 6.70642 9.44991 6.75097 9.86104 6.92127C10.2722 7.09157 10.6236 7.37996 10.8708 7.74997C11.118 8.11998 11.25 8.55499 11.25 9C11.25 9.59674 11.0129 10.169 10.591 10.591C10.169 11.0129 9.59674 11.25 9 11.25Z" fill="#696D81"></path>
                </g>
              </svg>
            </button>
            <input class="form-control fs-8 text-white bg-transparent border border-light" type="password" placeholder="Your password">
          </div>
        </div>
        <button class="btn w-100 px-10 py-5 btn-primary" type="submit">Create account</button>
        <div class="d-flex align-items-center my-12">
          <div class="w-100 border-bottom border-light"></div><span class="fw-semibold text-light-dark mx-4">or</span>
          <div class="w-100 border-bottom border-light"></div>
        </div>
        <div class="mb-12"><a class="btn btn-outline-light mb-4 py-5 d-flex align-items-center justify-content-center text-dark" href="#"><img class="img-fluid" src="fily-assets/sign-up/google-play.svg" alt=""><span class="ms-3">Continue with Google</span></a><a class="btn btn-outline-light py-5 d-flex align-items-center justify-content-center text-dark" href="#"><img class="img-fluid" src="fily-assets/sign-up/apple.svg" alt=""><span class="ms-3">Continue with Apple</span></a></div>
        <div class="d-flex align-items-center justify-content-center"><span class="fw-medium me-1">Already have an account? </span><a class="d-inline-block fw-semibold text-primary" href="#">Log in</a></div>
      </form>
    </div>
  </div>
  <div class="d-lg-none mt-16 position-relative"><img class="position-absolute top-0 start-0 w-100 h-100" style="object-fit: cover;" src="fily-assets/sign-up/pic.jpg" alt="">
    <div class="position-relative d-flex flex-column h-100 p-16"><a class="d-inline-block mb-64" href="#"><img class="img-fluid" src="fily-assets/logos/fily-treck-white-logo.svg" alt=""></a>
      <div class="mw-2xl mt-auto">
        <p class="fs-4 fw-bold text-white">Imagination is more important than knowledge because knowledge is limited.</p>
      </div>
    </div>
  </div>
</section>