Sign in / Sign up UI Components – Trizzle Library

<section class="py-36">
  <div class="container px-4 mx-auto">
    <div class="relative max-w-lg mx-auto pt-16 pb-16 px-6 md:px-10 lg:px-16 bg-gray-500 rounded-xl">
      <a class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2" href="#">
        <img class="block" src="trizzle-assets/logos/trizzle-logo-blue.svg" alt="">
      </a>
      <div class="relative max-w-md mx-auto text-center">
        <h2 class="text-2xl text-gray-100 font-semibold mb-2">Log in to your account</h2>
        <p class="text-gray-300 font-medium mb-10">Welcome back! Please enter your details.</p>
        <form action="">
          <div class="relative w-full h-14 py-4 px-3 mb-8 border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
            <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-semibold text-gray-300 px-1 bg-gray-500">Email</span>
            <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="signInInput1-1" type="email">
          </div>
          <div class="relative w-full h-14 py-4 px-3 mb-6 border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
            <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-semibold text-gray-300 px-1 bg-gray-500">Password</span>
            <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="signInInput1-2" type="password">
          </div>
          <div class="flex flex-wrap items-center justify-between mb-6">
            <div class="flex items-center mb-4 sm:mb-0">
              <input id="signInInput1-3" type="checkbox">
              <label class="ml-2 text-xs text-gray-300 font-semibold" for="">Remember for 30 days</label>
            </div>
            <div class="w-full sm:w-auto"><a class="inline-block text-xs font-semibold text-blue-500 hover:text-blue-600" href="#">Forgot password?</a></div>
          </div>
          <button class="block w-full py-4 mb-4 leading-6 text-white font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200">Sign In</button>
          <a class="flex items-center justify-center w-full py-4 mb-6 leading-6 text-white font-semibold bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
            <div class="w-4 bg-white rounded-sm">
              <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.5 0H14L8 4.738L2 0H1.5C0.672 0 0 0.672 0 1.5V10.5C0 11.328 0.672 12 1.5 12H2V2.646L8 7.261L14 2.645V12H14.5C15.328 12 16 11.328 16 10.5V1.5C16 0.672 15.328 0 14.5 0Z" fill="#F44336"></path>
              </svg>
            </div>
            <span class="ml-3">Sign In with Gmail</span>
          </a>
          <p class="font-medium">
            <span class="text-gray-300">Don’t have an account?</span>
            <a class="inline-block text-blue-500 hover:underline" href="#">Sign up</a>
          </p>
        </form>
      </div>
    </div>
  </div>
</section>

<section class="py-8 bg-dark-light">
  <div class="container">
    <div class="p-8 bg-secondary rounded-4">
      <div class="row mb-8 pb-6 border-bottom border-light-dark">
        <div class="col-12 col-sm-6 mb-6 mb-sm-0">
          <h4 class="fs-5 fw-bold text-white mb-1">Personal info</h4>
          <p class="fs-9 text-secondary-light mb-0">Lorem ipsum dolor sit amet</p>
        </div>
        <div class="col-12 col-sm-6">
          <div class="d-flex align-items-center justify-content-end"><a class="btn me-4 btn-sm btn-dark-light text-secondary-light" href="#">Cancel</a><a class="btn btn-sm btn-primary" href="#">Save</a></div>
        </div>
      </div>
      <form action="">
        <div class="pb-8 mb-8 border-bottom border-light-dark">
          <div class="row">
            <div class="col-12 col-sm-4 mb-4 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Name</span></div>
            <div class="col-12 col-sm-8">
              <div class="mw-xl">
                <div class="row">
                  <div class="col-12 col-sm-6 mb-4 mb-sm-0">
                    <input class="form-control bg-transparent text-light" id="" type="text" placeholder="John">
                  </div>
                  <div class="col-12 col-sm-6">
                    <input class="form-control bg-transparent text-light" id="" type="text" placeholder="Doe">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pb-8 mb-8 border-bottom border-light-dark">
          <div class="row">
            <div class="col-12 col-sm-4 mb-4 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Email address</span></div>
            <div class="col-12 col-sm-8">
              <div class="mw-xl">
                <input class="form-control bg-transparent text-light" id="" type="email" placeholder="johndoe@trizzle.ui">
              </div>
            </div>
          </div>
        </div>
        <div class="pb-8 mb-8 border-bottom border-light-dark">
          <div class="row">
            <div class="col-12 col-sm-4 mb-6 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Photo</span><span class="d-block fs-9 fw-medium text-secondary-light">Lorem ipsum dolor sit amet</span></div>
            <div class="col-12 col-sm-8">
              <div class="d-flex flex-wrap flex-sm-nowrap mw-xl">
                <div class="flex-shrink-0 mb-4 me-4 rounded-pill" style="width: 80px; height: 80px;"><img class="img-fluid" src="trizzle-assets/images/avatar-photo-form.png" alt=""></div>
                <div class="w-100 py-8 px-4 text-center border border-light-dark rounded-3">
                  <div class="position-relative mx-auto mb-4" style="width: 56px; height: 56px;">
                    <div class="d-flex align-items-center justify-content-center bg-primary rounded-pill" style="width: 56px; height: 56px;">
                      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6.71 5.71002L9 3.41002V13C9 13.2652 9.10536 13.5196 9.29289 13.7071C9.48043 13.8947 9.73478 14 10 14C10.2652 14 10.5196 13.8947 10.7071 13.7071C10.8946 13.5196 11 13.2652 11 13V3.41002L13.29 5.71002C13.383 5.80375 13.4936 5.87814 13.6154 5.92891C13.7373 5.97968 13.868 6.00582 14 6.00582C14.132 6.00582 14.2627 5.97968 14.3846 5.92891C14.5064 5.87814 14.617 5.80375 14.71 5.71002C14.8037 5.61706 14.8781 5.50645 14.9289 5.3846C14.9797 5.26274 15.0058 5.13203 15.0058 5.00002C15.0058 4.86801 14.9797 4.7373 14.9289 4.61544C14.8781 4.49358 14.8037 4.38298 14.71 4.29002L10.71 0.290018C10.6149 0.198978 10.5028 0.127613 10.38 0.0800184C10.1365 -0.0199996 9.86346 -0.0199996 9.62 0.0800184C9.49725 0.127613 9.3851 0.198978 9.29 0.290018L5.29 4.29002C5.19676 4.38326 5.1228 4.49395 5.07234 4.61577C5.02188 4.73759 4.99591 4.86816 4.99591 5.00002C4.99591 5.13188 5.02188 5.26245 5.07234 5.38427C5.1228 5.50609 5.19676 5.61678 5.29 5.71002C5.38324 5.80326 5.49393 5.87722 5.61575 5.92768C5.73757 5.97814 5.86814 6.00411 6 6.00411C6.13186 6.00411 6.26243 5.97814 6.38425 5.92768C6.50607 5.87722 6.61676 5.80326 6.71 5.71002ZM19 10C18.7348 10 18.4804 10.1054 18.2929 10.2929C18.1054 10.4804 18 10.7348 18 11V17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8947 17.2652 18 17 18H3C2.73478 18 2.48043 17.8947 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V11C2 10.7348 1.89464 10.4804 1.70711 10.2929C1.51957 10.1054 1.26522 10 1 10C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11V17C0 17.7957 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H17C17.7956 20 18.5587 19.6839 19.1213 19.1213C19.6839 18.5587 20 17.7957 20 17V11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10Z" fill="#E8EDFF"></path>
                      </svg>
                    </div>
                    <input class="position-absolute top-0 start-0 opacity-0" style="width: 56px; height: 56px;" id="" type="file" name="filephoto">
                  </div>
                  <p class="fw-semibold mb-1"><span class="text-primary">Click to upload a file</span> <span class="text-secondary-light">or drag and drop</span></p><span class="fs-10 text-secondary-light fw-semibold">PNG, JPG, GIF or up to 10MB</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pb-8 mb-8 border-bottom border-light-dark">
          <div class="row">
            <div class="col-12 col-sm-4 mb-4 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Role</span></div>
            <div class="col-12 col-sm-8">
              <div class="mw-xl">
                <input class="form-control bg-transparent text-light" id="" type="text" placeholder="Frontend Developer">
              </div>
            </div>
          </div>
        </div>
        <div class="pb-8 mb-8 border-bottom border-light-dark">
          <div class="row">
            <div class="col-12 col-sm-4 mb-4 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Country</span></div>
            <div class="col-12 col-sm-8">
              <div class="mw-xl">
                <div class="position-relative d-block w-100 fs-9 text-light fw-medium border border-light-dark bg-secondary rounded-3"><span class="position-absolute top-50 end-0 me-5 translate-middle-y">
                    <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10.9999 1.16994C10.8126 0.983692 10.5591 0.87915 10.2949 0.87915C10.0308 0.87915 9.77731 0.983692 9.58995 1.16994L5.99995 4.70994L2.45995 1.16994C2.27259 0.983692 2.01913 0.87915 1.75495 0.87915C1.49076 0.87915 1.23731 0.983692 1.04995 1.16994C0.95622 1.26291 0.881826 1.37351 0.831057 1.49537C0.780288 1.61723 0.75415 1.74793 0.75415 1.87994C0.75415 2.01195 0.780288 2.14266 0.831057 2.26452C0.881826 2.38638 0.95622 2.49698 1.04995 2.58994L5.28995 6.82994C5.38291 6.92367 5.49351 6.99807 5.61537 7.04883C5.73723 7.0996 5.86794 7.12574 5.99995 7.12574C6.13196 7.12574 6.26267 7.0996 6.38453 7.04883C6.50638 6.99807 6.61699 6.92367 6.70995 6.82994L10.9999 2.58994C11.0937 2.49698 11.1681 2.38638 11.2188 2.26452C11.2696 2.14266 11.2957 2.01195 11.2957 1.87994C11.2957 1.74793 11.2696 1.61723 11.2188 1.49537C11.1681 1.37351 11.0937 1.26291 10.9999 1.16994Z" fill="#3D485B"></path>
                    </svg></span>
                  <select class="position-relative form-control fs-8 border-0 text-light w-100 px-0 py-5 px-3 bg-transparent" style="appearance: none; outline: none;" id="" name="">
                    <option class="bg-gray-500" value="1">United States</option>
                    <option class="bg-gray-500" value="1">United States</option>
                    <option class="bg-gray-500" value="1">United States</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pb-8 mb-8 border-bottom border-light-dark">
          <div class="row">
            <div class="col-12 col-sm-4 mb-4 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Timezone</span></div>
            <div class="col-12 col-sm-8">
              <div class="mw-xl">
                <div class="position-relative d-block w-100 fs-9 text-light fw-medium border border-light-dark bg-secondary rounded-3"><span class="position-absolute top-50 end-0 me-5 translate-middle-y">
                    <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10.9999 1.16994C10.8126 0.983692 10.5591 0.87915 10.2949 0.87915C10.0308 0.87915 9.77731 0.983692 9.58995 1.16994L5.99995 4.70994L2.45995 1.16994C2.27259 0.983692 2.01913 0.87915 1.75495 0.87915C1.49076 0.87915 1.23731 0.983692 1.04995 1.16994C0.95622 1.26291 0.881826 1.37351 0.831057 1.49537C0.780288 1.61723 0.75415 1.74793 0.75415 1.87994C0.75415 2.01195 0.780288 2.14266 0.831057 2.26452C0.881826 2.38638 0.95622 2.49698 1.04995 2.58994L5.28995 6.82994C5.38291 6.92367 5.49351 6.99807 5.61537 7.04883C5.73723 7.0996 5.86794 7.12574 5.99995 7.12574C6.13196 7.12574 6.26267 7.0996 6.38453 7.04883C6.50638 6.99807 6.61699 6.92367 6.70995 6.82994L10.9999 2.58994C11.0937 2.49698 11.1681 2.38638 11.2188 2.26452C11.2696 2.14266 11.2957 2.01195 11.2957 1.87994C11.2957 1.74793 11.2696 1.61723 11.2188 1.49537C11.1681 1.37351 11.0937 1.26291 10.9999 1.16994Z" fill="#3D485B"></path>
                    </svg></span>
                  <select class="position-relative form-control fs-8 border-0 text-light w-100 px-0 py-5 px-3 bg-transparent" style="appearance: none; outline: none;" id="" name="">
                    <option class="bg-gray-500" value="1">Central Daylight Time (GMT-5) UTC-08:00</option>
                    <option class="bg-gray-500" value="1">Central Daylight Time (GMT-5) UTC-08:00</option>
                    <option class="bg-gray-500" value="1">Central Daylight Time (GMT-5) UTC-08:00</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pb-8 mb-8 border-bottom border-light-dark">
          <div class="row">
            <div class="col-12 col-sm-4 mb-4 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Website</span></div>
            <div class="col-12 col-sm-8">
              <div class="mw-xl">
                <input class="form-control bg-transparent text-light" id="" type="text" placeholder="trizzle.ui/shuffle">
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="row">
            <div class="col-12 col-sm-4 mb-6 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Bio</span><span class="d-block fs-9 fw-medium text-secondary-light">Lorem ipsum dolor sit amet</span></div>
            <div class="col-12 col-sm-8">
              <div class="mw-xl">
                <textarea class="form-control bg-transparent text-light" style="height: 225px; resize: none;" id="" type="text" placeholder="Lorem ipsum dolor sit amet"></textarea>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>