Sign In / Sign Up Components in Vista library

<section class="bg-darkPink-900 pr-6 pl-6 lg:pl-28 py-6">
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-1/2 p-4">
            <div class="flex flex-col justify-center h-full max-w-md mx-auto">
                <h1 class="font-heading text-white text-4xl font-bold mb-4">Login</h1>
                <p class="text-gray-400 mb-8">
                    <span>Don’t have an account?</span>
                    <a href="#" class="text-white font-bold hover:text-opacity-70 transition duration-200">Sign up</a>
                </p>
                <form action="">
                    <label for="email" class="block text-sm mb-2 text-white font-medium">Email</label>
                    <input type="email" id="email" class="px-4 py-3 mb-6 rounded-full border border-white border-opacity-10 bg-white bg-opacity-5 text-sm placeholder-white placeholder-opacity-50 text-white focus:border-white focus:border focus:border-opacity-50 transition duration-200 outline-none w-full" placeholder="john@email.com">
                    <label for="password" class="block text-sm mb-2 text-white font-medium">Password</label>
                    <div class="rounded-full border border-white border-opacity-10 bg-white bg-opacity-5 px-4 py-3 flex items-center mb-8" x-data="{ visible: false }">
                        <input type="password" :type="visible ? 'text' : 'password'" id="password" class="flex-1 bg-transparent text-sm placeholder-white placeholder-opacity-50 text-white transition duration-200 outline-none" placeholder="Enter password">
                        <svg x-on:click="visible = !visible" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <g opacity="0.5">
                              <path d="M13.7445 6.36839L13.7446 6.36857C14.0157 6.79424 14.1663 7.3838 14.1663 7.99912C14.1663 8.61458 14.0157 9.20179 13.7454 9.62345L13.7447 9.62455C13.0069 10.7821 12.1122 11.6786 11.1304 12.2878C10.1493 12.8899 9.08596 13.2066 7.99967 13.2066C5.83421 13.2066 3.72502 11.9415 2.25517 9.62537L2.25473 9.62468C1.98347 9.1988 1.83301 8.61081 1.83301 7.99662C1.83301 7.3825 1.98344 6.79456 2.25465 6.36869C2.99243 5.21114 3.88718 4.31462 4.86891 3.70547C5.85008 3.10332 6.91339 2.78662 7.99967 2.78662C10.1646 2.78662 12.2742 4.05784 13.7445 6.36839ZM4.80634 7.99995C4.80634 9.76196 6.22939 11.1933 7.99967 11.1933C9.76996 11.1933 11.193 9.76196 11.193 7.99995C11.193 6.23795 9.76996 4.80662 7.99967 4.80662C6.22939 4.80662 4.80634 6.23795 4.80634 7.99995Z" fill="white" stroke="white" style="fill:white;fill-opacity:1;stroke:white;stroke-opacity:1;"></path>
                              <path d="M7.99961 6.09326C6.95294 6.09326 6.09961 6.94659 6.09961 7.99993C6.09961 9.04659 6.95294 9.89993 7.99961 9.89993C9.04628 9.89993 9.90628 9.04659 9.90628 7.99993C9.90628 6.95326 9.04628 6.09326 7.99961 6.09326Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                            </g>
                        </svg>
                    </div>
                    <button type="submit" class="group relative inline-block w-full mb-6 p-0.5 font-semibold overflow-hidden rounded-full shadow-pink hover:shadow-none focus:shadow-none">
                        <div class="absolute inset-0 bg-gradient-to-b from-pink-400 to-pink-500 rounded-full"></div>
                        <div class="relative z-50 flex justify-center items-center py-2 px-4 bg-pink-500 group-hover:bg-pink-600 group-focus:bg-pink-600 rounded-full transition duration-200">
                            <p class="text-white text-center">Log in</p>
                        </div>
                    </button>
                    <a href="#" class="group relative inline-block w-full p-0.5 font-semibold overflow-hidden rounded-full">
                        <div class="absolute inset-0 bg-gradient-to-b from-white to-gray-500 group-focus:to-white opacity-40 group-focus:opacity-20 rounded-full"></div>
                        <div class="relative z-50 flex justify-center items-center py-2 px-4 bg-white group-hover:bg-opacity-80 group-focus:bg-opacity-80 rounded-full transition duration-200">
                            <img class="mr-3 h-5" src="vista-assets/images/logos/google-logo.svg" alt="">
                            <p class="font-semibold">Log in with Google</p>
                        </div>
                    </a>
                </form>
            </div>
        </div>
        <div class="w-full lg:w-1/2 p-4">
            <img class="ml-auto object-cover rounded-2xl" style="height:850px" src="vista-assets/images/sign-up/picture-pink1.png" alt="">
        </div>
    </div>
</section>

<section class="position-relative bg-danger-dark">
  <div class="position-absolute top-0 end-0 col-6 h-100 p-8 d-none d-lg-block"><img class="img-fluid d-block h-100 w-100 mw-4xl" src="vista-assets/images/sign-up/picture-pink1.png" alt=""></div>
  <div class="position-relative container">
    <div class="row">
      <div class="col-lg-6 pt-8 pb-24 pb-lg-52">
        <div class="mw-md mx-auto">
          <div class="mb-8"><img class="img-fluid d-block mb-40" src="vista-assets/images/logos/vista-logo.svg" alt="">
            <h2 class="font-heading h4 mb-4">Sign up</h2>
            <p class="d-flex align-items-center mb-0"><span class="me-1 text-white text-opacity-50">Already have an account?</span><a class="btn btn-link p-0 text-white fw-medium" href="#">Login</a></p>
          </div>
          <form action="">
            <div class="mb-6">
              <label class="form-label fs-9" for="">Email</label>
              <input class="form-control bg-white bg-opacity-10 border-white border-opacity-25" type="email" id="" aria-describedby="" placeholder="john@email.com">
            </div>
            <div class="mb-8">
              <label class="form-label fs-9" for="">Password</label>
              <div class="position-relative">
                <input class="form-control bg-white bg-opacity-10 border-white border-opacity-25" type="password" id="" aria-describedby="" placeholder="Enter password">
                <button class="position-absolute top-50 end-0 me-6 translate-middle-y btn p-0 border-0 text-secondary">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.7445 6.36839L13.7446 6.36857C14.0157 6.79424 14.1663 7.3838 14.1663 7.99912C14.1663 8.61458 14.0157 9.20179 13.7454 9.62345L13.7447 9.62455C13.0069 10.7821 12.1122 11.6786 11.1304 12.2878C10.1493 12.8899 9.08596 13.2066 7.99967 13.2066C5.83421 13.2066 3.72502 11.9415 2.25517 9.62537L2.25473 9.62468C1.98347 9.1988 1.83301 8.61081 1.83301 7.99662C1.83301 7.3825 1.98344 6.79456 2.25465 6.36869C2.99243 5.21114 3.88718 4.31462 4.86891 3.70547C5.85008 3.10332 6.91339 2.78662 7.99967 2.78662C10.1646 2.78662 12.2742 4.05784 13.7445 6.36839ZM4.80634 7.99995C4.80634 9.76196 6.22939 11.1933 7.99967 11.1933C9.76996 11.1933 11.193 9.76196 11.193 7.99995C11.193 6.23795 9.76996 4.80662 7.99967 4.80662C6.22939 4.80662 4.80634 6.23795 4.80634 7.99995Z" fill="currentColor" stroke="currentColor"></path>
                    <path d="M7.99961 6.09326C6.95294 6.09326 6.09961 6.94659 6.09961 7.99993C6.09961 9.04659 6.95294 9.89993 7.99961 9.89993C9.04628 9.89993 9.90628 9.04659 9.90628 7.99993C9.90628 6.95326 9.04628 6.09326 7.99961 6.09326Z" fill="currentColor"></path>
                  </svg>
                </button>
              </div>
            </div><a class="btn w-100 mb-6 d-inline-flex align-items-center justify-content-center btn-danger btn-shadow-danger border-3 border-white border-opacity-10" href="#">Sign up</a><a class="btn w-100 d-inline-flex align-items-center justify-content-center btn-light text-danger-dark border-3 border-danger border-opacity-10" href="#">
              <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18.6716 8.36788H18.0003V8.33329H10.5003V11.6666H15.2099C14.5228 13.607 12.6766 15 10.5003 15C7.73908 15 5.50033 12.7612 5.50033 9.99996C5.50033 7.23871 7.73908 4.99996 10.5003 4.99996C11.7749 4.99996 12.9345 5.48079 13.8174 6.26621L16.1745 3.90913C14.6862 2.52204 12.6953 1.66663 10.5003 1.66663C5.89824 1.66663 2.16699 5.39788 2.16699 9.99996C2.16699 14.602 5.89824 18.3333 10.5003 18.3333C15.1024 18.3333 18.8337 14.602 18.8337 9.99996C18.8337 9.44121 18.7762 8.89579 18.6716 8.36788Z" fill="#FFC107" style="fill:#FFC107;fill:color(display-p3 1.0000 0.7569 0.0275);fill-opacity:1;"></path>
                <path d="M15.8118 3.91835L13.8038 5.92639C12.9022 5.19322 11.7543 4.74996 10.5004 4.74996C8.40852 4.74996 6.60603 5.97412 5.76255 7.74334L3.45195 6.04881C4.83686 3.58332 7.47296 1.91663 10.5004 1.91663C12.5359 1.91663 14.3904 2.67488 15.8118 3.91835Z" fill="#FF3D00" stroke="#2E0F17" style="fill:#FF3D00;fill:color(display-p3 1.0000 0.2392 0.0000);fill-opacity:1;stroke:#2E0F17;stroke:color(display-p3 0.1794 0.0598 0.0891);stroke-opacity:1;" stroke-width="0.5"></path>
                <path d="M15.7036 16.1732L13.4963 14.3054C12.6198 14.92 11.5736 15.2509 10.4998 15.25L15.7036 16.1732ZM15.7036 16.1732C14.2965 17.3616 12.4843 18.0834 10.4998 18.0834C7.43286 18.0834 4.76999 16.3714 3.40035 13.8525L15.7036 16.1732Z" fill="#4CAF50" stroke="#2E0F17" style="fill:#4CAF50;fill:color(display-p3 0.2980 0.6863 0.3137);fill-opacity:1;stroke:#2E0F17;stroke:color(display-p3 0.1794 0.0598 0.0891);stroke-opacity:1;" stroke-width="0.5"></path>
                <path d="M18.6713 8.36796H18V8.33337H10.5V11.6667H15.2096C14.8809 12.5902 14.2889 13.3972 13.5067 13.988L13.5079 13.9871L16.0871 16.1696C15.9046 16.3355 18.8333 14.1667 18.8333 10C18.8333 9.44129 18.7758 8.89587 18.6713 8.36796Z" fill="#1976D2" style="fill:#1976D2;fill:color(display-p3 0.0980 0.4627 0.8235);fill-opacity:1;"></path>
              </svg><span class="ms-3">Sign up with Google</span></a>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="d-lg-none p-8"><img class="img-fluid d-block w-100 mw-md mx-auto" src="vista-assets/images/sign-up/picture-pink1.png" alt=""></div>
</section>