Cards

<div class="w-full md:w-1/2">
    <div class="relative flex flex-col w-full mb-6 shadow-lg rounded-lg bg-white">
       <div class="mb-0 px-6 py-6">
          <div class="text-center mb-3">
             <h6 class="text-blueGray-500 text-sm font-bold">Sign in with</h6>
          </div>
          <div class="text-center"><a href="javascript:;" class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-github-regular border-github-regular active:bg-github-active active:border-github-active text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="mr-1 fab fa-github"></i> github</a><a href="javascript:;" class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-facebook-regular border-facebook-regular active:bg-facebook-active active:border-facebook-active text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="mr-1 fab fa-facebook"></i> facebook</a><a href="javascript:;" class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-twitter-regular border-twitter-regular active:bg-twitter-active active:border-twitter-active text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="mr-1 fab fa-twitter"></i> twitter</a></div>
          <hr class="mt-6 border-b-1 border-blueGray-200">
       </div>
       <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
          <div class="text-blueGray-500 text-center mb-3 font-bold"><small>Or sign in with credentials</small></div>
          <form>
             <div class="relative w-full">
                <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1">Email</label>
                <div class="mb-3 pt-0"><input placeholder="Email" type="email" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
             </div>
             <div class="relative w-full">
                <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1">Password</label>
                <div class="mb-3 pt-0"><input placeholder="Password" type="password" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
             </div>
             <div class="mt-2 inline-block"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Remember me</span></label></div>
             <div class="text-center mt-5"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-blueGray-800 border-blueGray-800 active:bg-blueGray-900 active:border-blueGray-900 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md w-full text-center">Sign in</button></div>
          </form>
       </div>
    </div>
    <div class="flex flex-wrap mt-6 relative">
       <div class="w-1/2"><a href="javascript:;" class="text-blueGray-500 ml-2"><small>Forgot password?</small></a></div>
       <div class="w-1/2 text-right"><a href="javascript:;" class="text-blueGray-500 mr-2"><small>Create new account</small></a></div>
    </div>
 </div>

<div class="w-full md:w-1/2">
    <div class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100">
       <div class="rounded-t-lg bg-blueGray-800 mb-0 px-6 py-6">
          <div class="text-center mb-3">
             <h6 class="text-blueGray-300 text-sm font-bold">Signup with</h6>
          </div>
          <div class="text-center"><a href="javascript:;" class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-twitter-regular border-twitter-regular active:bg-twitter-active active:border-twitter-active text-sm px-6 py-2 shadow hover:shadow-lg rounded-md"><i class="mr-1 fab fa-twitter"></i> twitter</a><a href="javascript:;" class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-facebook-regular border-facebook-regular active:bg-facebook-active active:border-facebook-active text-sm px-6 py-2 shadow hover:shadow-lg rounded-md"><i class="mr-1 fab fa-facebook"></i> facebook</a></div>
       </div>
       <div class="flex-auto px-4 lg:px-10 py-6">
          <div class="text-blueGray-500 text-center mb-3 font-bold"><small>Or Register with credentials</small></div>
          <form>
             <div class="relative w-full">
                <label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Email</label>
                <div class="mb-3 pt-0"><input placeholder="Email" type="email" class="border-transparent shadow px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
             </div>
             <div class="relative w-full">
                <label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Password</label>
                <div class="mb-3 pt-0"><input placeholder="Password" type="password" class="border-transparent shadow px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
             </div>
             <div class="relative w-full">
                <label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Password Confirmation</label>
                <div class="mb-3 pt-0"><input placeholder="Password again" type="password" class="border-transparent shadow px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
             </div>
             <div class="mt-2 inline-block"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Subscribe to Newsletter</span></label></div>
             <div class="text-center mt-6"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-blueGray-800 border-blueGray-800 active:bg-blueGray-900 active:border-blueGray-900 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Register</button></div>
          </form>
       </div>
    </div>
 </div>

<div class="w-full md:w-1/3">
    <div class="bg-white relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg">
       <div class="pb-6 rounded-t-lg overflow-hidden"><img src="/notus-pro-react/static/media/linth3.41699b02.svg" alt="..." class="w-full rounded-t-lg" style="margin-top: -46%;"></div>
       <div class="lg:p-10 px-4 py-4 flex-auto rounded-b-lg">
          <h4 class="text-2xl font-bold text-center">Reset Password</h4>
          <div class="text-center text-blueGray-500 mb-5 mt-1">
             <p>Enter email address below</p>
          </div>
          <div class="relative flex w-full flex-wrap items-stretch mb-3"><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 pl-3"><i class="fas fa-envelope"></i></span><input placeholder="Email address" type="email" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pl-10 "></div>
          <div class="text-center mt-6"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-blueGray-800 border-blueGray-800 active:bg-blueGray-900 active:border-blueGray-900 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Reset</button></div>
       </div>
    </div>
 </div>

<div class="w-full">
    <div class="bg-blueGray-200 rounded-lg shadow-lg relative overflow-hidden h-full z-1 max-w-full min-h-480-px w-768-px container mx-auto px-4">
       <div class="transition-all bg-blueGray-200 duration-700 ease-in-out h-full top-0 absolute w-1/2 left-0 z-2 transform ">
          <form class="flex items-center justify-center flex-col px-12 h-full text-center">
             <h2 class="text-2xp mb-3 font-bold">Sign in with</h2>
             <div class="text-center"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-facebook-regular border-facebook-regular active:bg-facebook-active active:border-facebook-active text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="fab fa-facebook"></i></button><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-instagram-regular border-instagram-regular active:bg-instagram-active active:border-instagram-active text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="fab fa-instagram"></i></button><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-twitter-regular border-twitter-regular active:bg-twitter-active active:border-twitter-active text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="fab fa-twitter"></i></button></div>
             <span class="text-blueGray-500 mt-6 mb-3">or use your account</span>
             <div class="relative flex w-full flex-wrap items-stretch mb-3"><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 pl-3"><i class="fas fa-envelope"></i></span><input placeholder="Email" type="email" class="border-transparent shadow px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pl-10 "></div>
             <div class="relative flex w-full flex-wrap items-stretch mb-3"><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 pl-3"><i class="fas fa-lock"></i></span><input placeholder="Password" type="password" class="border-transparent shadow px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pl-10 "></div>
             <div class="mt-3"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-blueGray-800 border-blueGray-800 active:bg-blueGray-900 active:border-blueGray-900 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">sign in</button></div>
          </form>
       </div>
       <div class="transition-all bg-blueGray-200 duration-700 ease-in-out h-full top-0 absolute w-1/2 left-0 transform z-1 opacity-0">
          <form class="flex items-center justify-center flex-col px-12 h-full text-center">
             <h2 class="text-2xp mb-2 font-bold">Create Account</h2>
             <div class="text-center"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-facebook-regular border-facebook-regular active:bg-facebook-active active:border-facebook-active text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="fab fa-facebook"></i></button><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-instagram-regular border-instagram-regular active:bg-instagram-active active:border-instagram-active text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="fab fa-instagram"></i></button><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-twitter-regular border-twitter-regular active:bg-twitter-active active:border-twitter-active text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="fab fa-twitter"></i></button></div>
             <span class="text-blueGray-500 mt-6 mb-3">or use your email for registration</span>
             <div class="relative flex w-full flex-wrap items-stretch mb-3"><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 pl-3"><i class="fas fa-user"></i></span><input placeholder="Name" type="name" class="border-transparent shadow px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pl-10 "></div>
             <div class="relative flex w-full flex-wrap items-stretch mb-3"><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 pl-3"><i class="fas fa-envelope"></i></span><input placeholder="Email" type="email" class="border-transparent shadow px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pl-10 "></div>
             <div class="relative flex w-full flex-wrap items-stretch mb-3"><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 pl-3"><i class="fas fa-lock"></i></span><input placeholder="Password" type="password" class="border-transparent shadow px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pl-10 "></div>
             <div class="mt-3"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-blueGray-800 border-blueGray-800 active:bg-blueGray-900 active:border-blueGray-900 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">sign up</button></div>
          </form>
       </div>
       <div class="transition-all duration-700 ease-in-out transform absolute top-0 left-1/2 w-1/2 h-full overflow-hidden z-9999 ">
          <div class="bg-blueGray-800 text-white transition-all duration-700 ease-in-out transform relative -left-full h-full w-double ">
             <div class="transition-all duration-700 ease-in-out transform absolute flex items-center justify-center flex-col p-10 text-center top-0 right-0 h-full w-1/2 ">
                <h3 class="text-2xp mb-2 font-bold">Join Us!</h3>
                <p class="mb-6">To keep connected with us please login with your personal info</p>
                <button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-blueGray-800 bg-blueGray-200 border-blueGray-200 active:bg-blueGray-300 active:border-blueGray-300 text-xs px-3 py-2 shadow hover:shadow-md rounded-md">Sign up</button>
             </div>
             <div class="transition-all duration-700 ease-in-out transform absolute flex items-center justify-center flex-col p-10 text-center top-0 h-full w-1/2 -translate-x-1/5">
                <h3 class="text-2xp mb-2 font-bold">Welcome back!</h3>
                <p class="mb-6">Enter your personal details and start journey with us</p>
                <button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-blueGray-800 bg-blueGray-200 border-blueGray-200 active:bg-blueGray-300 active:border-blueGray-300 text-xs px-3 py-2 shadow hover:shadow-md rounded-md">Sign in</button>
             </div>
          </div>
       </div>
    </div>
 </div>