Tailwind Sign In / Sign Up Components in Gradia library

<section class="relative pt-32 pb-36 bg-gradient-gray2 overflow-hidden"><img class="absolute top-1/2 transform -translate-y-1/2 left-0" src="gradia-assets/elements/sign-up/radial.svg" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <div class="flex flex-wrap -m-6">
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-xl">
          <h2 class="mb-3 font-heading font-bold text-gray-900 text-6xl sm:text-7xl" >Welcome back!</h2>
          <p class="mb-12 text-lg text-gray-500" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
          <div class="flex flex-wrap -m-2 mb-6">
            <div class="w-full p-2">
              <input class="w-full px-5 py-3.5 text-gray-500 placeholder-gray-500 bg-white outline-none focus:ring-4 focus:ring-indigo-500 border border-gray-200 rounded-lg" type="text" placeholder="Email address" name="email">
            </div>
            <div class="w-full p-2">
              <input class="w-full px-5 py-3.5 text-gray-500 placeholder-gray-500 bg-white outline-none focus:ring-4 focus:ring-indigo-500 border border-gray-200 rounded-lg" type="password" placeholder="Password" name="password">
            </div>
          </div>
          <div class="flex flex-wrap -m-1.5 mb-8">
            <div class="w-auto p-1.5">
              <input class="w-4 h-4" type="checkbox">
            </div>
            <div class="flex-1 p-1.5">
              <p class="text-gray-900 text-sm" >Remember me</p>
            </div>
          </div>
          <div class="group relative md:max-w-max">
            <div class="absolute top-0 left-0 w-full h-full bg-gradient-green opacity-0 group-hover:opacity-50 rounded-lg transition ease-out duration-300"></div>
            <button class="p-1 w-full font-heading font-semibold text-xs text-gray-900 group-hover:text-white uppercase tracking-px overflow-hidden rounded-md">
              <div class="relative p-5 px-20 bg-gradient-green overflow-hidden rounded-md">
                <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-gray-900 transition ease-in-out duration-500"></div>
                <p class="relative z-10" >Login</p>
              </div>
            </button>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-lg ml-auto">
          <div class="flex flex-wrap -m-6">
            <div class="w-auto p-6">
              <div class="flex flex-wrap -m-4">
                <div class="w-full p-4">
                  <p class="text-xl text-black" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lacus urna aliquet malesuada gravida viverra vehicula. Elementum, fusce in eu nunc viverra. Diam enim, varius tincidunt orci sed mauris. Eu sed risus tempor lorem.</p>
                </div>
                <div class="w-full p-4">
                  <div class="flex flex-wrap items-center -m-1.5">
                    <div class="w-auto p-1.5"><img src="gradia-assets/images/sign-up/elipse1.png" alt=""></div>
                    <div class="w-auto p-1.5">
                      <h3 class="font-heading font-semibold text-lg text-gray-900" >Darlene Robertson</h3>
                      <p class="text-gray-600 text-sm" >Software Developer</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-auto p-6">
              <div class="flex flex-wrap -m-4">
                <div class="w-full p-4">
                  <p class="text-xl text-black" >Elementum, fusce in eu nunc viverra. Diam enim, varius tincidunt orci sed mauris. Eu sed risus tempor lorem ipsum.</p>
                </div>
                <div class="w-full p-4">
                  <div class="flex flex-wrap items-center -m-1.5">
                    <div class="w-auto p-1.5"><img src="gradia-assets/images/sign-up/elipse2.png" alt=""></div>
                    <div class="w-auto p-1.5">
                      <h3 class="font-heading font-semibold text-lg text-gray-900" >Devon Lane</h3>
                      <p class="text-gray-600 text-sm" >UI/UX Designer</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>