Tailwind Sign In / Sign Up Components in Bendis library

<section class="relative py-24 bg-blue-50">
  <img class="hidden lg:block absolute top-0 right-0 w-2/5 h-full object-cover clip-path-left" src="https://images.unsplash.com/photo-1544159465-672a2b0d5f2c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="max-w-lg">
          <h2 class="mb-10 text-4xl font-bold font-heading text-blue-800">Take quick action that increases your brand's regular profit.</h2>
          <p class="text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="p-6 lg:p-16 bg-white">
          <form action="#">
            <span class="inline-block uppercase text-blue-400 font-semibold tracking-widest">Sign In</span>
            <h3 class="mb-4 text-2xl font-bold font-heading text-blue-800">Join our community</h3>
            <input class="block w-full py-4 pl-6 mb-2 text-sm placeholder-blue-400 text-blue-400 bg-blue-50" type="email" placeholder="E-mail address">
            <input class="block w-full py-4 pl-6 mb-6 text-sm placeholder-blue-400 text-blue-400 bg-blue-50" type="password" placeholder="Password">
            <label class="inline-flex mb-4 text-left">
              <input class="mr-2" type="checkbox" name="terms" value="1">
              <span class="-mt-1 inline-block text-sm text-gray-500">By signing up, you agree to our <a class="text-blue-400 hover:underline" href="#">Terms, Data Policy</a> and <a class="text-blue-400 hover:underline" href="#">Cookies Policy</a>.</span>
            </label>
            <button class="w-full inline-block mb-4 py-5 text-sm text-blue-800 uppercase font-bold bg-yellow-500 hover:bg-yellow-400 transition duration-200">Sign In</button>
            <a class="block mb-4 text-center text-sm text-blue-500 hover:text-blue-600" href="#">Forgot password?</a>
            <a class="flex items-center justify-center mb-4 py-5 border-2 border-blue-800 hover:bg-blue-50" href="#">
              <span class="inline-block mr-4">
                <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63483 17.7272V9.766H9.35819L9.76678 6.66243H6.63483V4.68126C6.63483 3.78299 6.8881 3.17083 8.20287 3.17083L9.87701 3.17015V0.394215C9.58749 0.357312 8.59367 0.272705 7.43697 0.272705C5.0216 0.272705 3.36799 1.71878 3.36799 4.37389V6.66243H0.636368V9.766H3.36799V17.7272H6.63483Z" fill="#3C74F9"></path>
                </svg>
              </span>
              <span class="text-sm font-bold uppercase text-blue-800">Sign in with Facebook</span>
            </a>
            <a class="flex items-center justify-center mb-4 py-5 border-2 border-blue-800 hover:bg-blue-50" href="#">
              <span class="inline-block mr-4">
                <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M19.3181 2.14598C18.6356 2.44844 17.9032 2.65356 17.1337 2.74513C17.9194 2.27462 18.5208 1.52831 18.8059 0.641769C18.0689 1.0775 17.2553 1.39389 16.3885 1.56541C15.6943 0.82489 14.707 0.363647 13.6118 0.363647C11.5108 0.363647 9.80724 2.06719 9.80724 4.16707C9.80724 4.46489 9.84084 4.75577 9.90575 5.03392C6.74436 4.87513 3.94105 3.3605 2.06484 1.05895C1.73687 1.61986 1.5503 2.27344 1.5503 2.9711C1.5503 4.29107 2.22245 5.45574 3.24227 6.13713C2.61878 6.11628 2.03239 5.94477 1.51902 5.65968V5.70719C1.51902 7.5498 2.83087 9.08762 4.57033 9.43762C4.25163 9.52337 3.91557 9.57089 3.5679 9.57089C3.32224 9.57089 3.08466 9.54656 2.85172 9.50019C3.33611 11.0125 4.74069 12.1123 6.40484 12.1424C5.10342 13.1623 3.46245 13.7683 1.68011 13.7683C1.37302 13.7683 1.07054 13.7498 0.77272 13.7162C2.45657 14.7974 4.45563 15.4279 6.60418 15.4279C13.6026 15.4279 17.4281 9.63116 17.4281 4.60398L17.4153 4.11147C18.1628 3.57834 18.8094 2.90853 19.3181 2.14598Z" fill="#3C74F9"></path>
                </svg>
              </span>
              <span class="text-sm font-bold uppercase text-blue-800">Sign in with Twitter</span>
            </a>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>