Sign in / Sign up UI Components – Yofte Library

<section class="py-20 bg-gray-100 overflow-x-hidden">
  <div class="relative container px-4 mx-auto">
    <div class="relative max-w-4xl mx-auto">
      <div class="absolute inset-0 bg-blue-200 my-24 -ml-4 -mr-4"></div>
      <div class="relative py-16 md:pt-32 md:pb-20 px-4 sm:px-8 bg-white">
        <div class="max-w-lg mx-auto text-center">
          <a class="inline-block mb-14 text-3xl font-bold font-heading" href="#">
            <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
          </a>
          <h3 class="mb-8 text-4xl md:text-5xl font-bold font-heading">Signing up with social is super quick</h3>
          <p class="mb-10 font-semibold font-heading">Please, do not hesitate</p>
          <form action="">
            <input class="w-full mb-4 px-12 py-6 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" type="text" placeholder="steven@example.dev">
            <input class="w-full mb-4 px-12 py-6 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" type="password" placeholder="Password">
            <input class="w-full mb-10 px-12 py-6 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" type="password" placeholder="Repeat password">
            <label class="flex" for="">
              <input class="mr-4 mt-1" type="checkbox">
              <span class="text-sm">By singning up, you agree to our Terms, Data Policy and Cookies.</span>
            </label>
            <button class="mt-12 md:mt-16 bg-blue-800 hover:bg-blue-900 text-white font-bold font-heading py-5 px-8 rounded-md uppercase">JOIN yofte</button>
          </form>
        </div>
      </div>
    </div>

<section class="section has-background-light is-clipped">
  <div class="container is-relative">
    <div class="has-mw-4xl mx-auto is-relative">
      <div class="-ml-6 -mr-6 mt-12 mb-12 is-absolute is-top-0 is-bottom-0 is-left-0 is-right-0 has-background-info"></div>
      <div class="px-4 px-8-mobile py-16 pt-32-tablet pb-20-tablet is-relative has-background-white">
        <div class="has-mw-lg mx-auto has-text-centered">
          <a class="mb-14 is-inline-block is-size-6" href="#">
            <img class="image" src="yofte-assets/logos/yofte-logo.svg" alt="">
          </a>
          <h2 class="title has-leading-2 mb-8">Signing up with social is super quick</h2>
          <p class="mb-10 has-text-weight-bold">Please, do not hesitate</p>
          <form action="">
            <div class="field mb-10">
              <div class="control mb-4">
                <input class="input" type="text" placeholder="john@example.com">
              </div>
              <div class="control mb-4">
                <input class="input" type="password" placeholder="Password">
              </div>
              <div class="control">
                <input class="input" type="password" placeholder="Repeat password">
              </div>
            </div>
            <label class="checkbox" for="">

<section class="py-20 bg-light overflow-hidden">
  <div class="position-relative container">
    <div class="position-relative mw-4xl mx-auto">
      <div class="position-absolute top-50 start-0 end-0 translate-middle-y bg-info-light ms-n6 me-n6" style="height: 90%;"></div>
      <div class="position-relative py-16 pt-md-32 pb-md-20 px-4 px-sm-8 bg-white">
        <div class="mw-lg mx-auto text-center"><a class="d-inline-block h6 mb-14" href="#"  ><img class="img-fluid" src="yofte-assets/logos/yofte-logo.svg" alt=""/></a>
          <h2 class="mb-8" >Signing up with social is super quick</h2>
          <p class="mb-10 fw-bold" >Please, do not hesitate</p>
          <form action="">
            <input class="form-control form-control-lg mb-4" type="text" placeholder="john@example.com"/>
            <input class="form-control form-control-lg mb-4" type="password" placeholder="Password"/>
            <input class="form-control form-control-lg mb-10" type="password" placeholder="Repeat password"/>
            <div class="form-check" for="">
              <input class="form-check-input" type="checkbox"/>
              <label class="form-check-label" >By singning up, you agree to our Terms, Data Policy and Cookies.</label>
            </div>
            <button class="mt-12 mt-md-16 btn btn-dark" >JOIN yofte</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>