Forms

Login forms

Simple

We recommend using a dark background image or with a dark overlay. This image was taken from uiGradients

To adjust the placeholder color add the following line of codes:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #fff;
opacity: 1;
 }

 input:-moz-placeholder, textarea:-moz-placeholder {
color: #fff;
opacity: 1;
 }

<div class="flex shadow-lg flex-col bg-cover bg-center justify-content bg-grey p-6 rounded pt-8 pb-8"
   style="background-image: url('')">
<div class="text-center text-white mb-6">
  <h2>SIGN UP</h2>
</div>
<div>
  <form>
   <input class="bg-transparent border-b m-auto block border-white w-full mb-6 text-white pb-1" type="text"
         placeholder="Username"/>
   <input class="bg-transparent border-b m-auto block border-white w-full mb-6 text-white pb-1" type="password"
         placeholder="password"/>
   <div class="flex mt-4">
     <input type="checkbox" class="mr-2" name="agreement" value="agree">
     <p class="text-white">Accept the
      <a href="#" class=" no-underline text-teal hover:text-teal-light">Terms and Conditions</a>
     </p>
   </div>
   <input class="shadow-lg pt-3 pb-3 mt-6 w-full text-white bg-teal hover:bg-teal-light rounded-full "
         type="submit" value="SIGN IN">
  </form>
</div>
<div>
  <p class="mt-4 text-white text-sm">Have an account? <a href="#"
                                           class="no-underline text-teal hover:text-teal-light">Log in</a>
  </p>
</div>
 </div>

With image

<div class="shadow-lg sm:flex">
	<div class="sm:w-2/5 w-full bg-grey-light bg-cover bg-center text-white"
		 style="background-image: url('')">
	  <div class="p-8">
		<h1>SIGN<span class="text-indigo-light">UP</span></h1>
		<p class="leading-tight mt-2 text-sm text-white">Create an account to join our awesome community</p>
	  </div>
	</div>
	<div class="sm:w-3/5 w-full bg-white">
	  <div class="p-8">
		<form>
		  <label for="username" class="text-xs text-grey">Username</label>
		  <input id="username" class="bg-transparent border-b m-auto block border-grey w-full mb-6 text-grey-darker pb-1" type="text"
				 placeholder=""/>
		  <label id="passowrd" class="text-xs text-grey">Password</label>
		  <input id="password" class="bg-transparent border-b m-auto block border-grey w-full mb-6 text-grey-darker pb-1"
				 type="password"
				 placeholder=""/>
		  <input class="shadow-lg pt-3 pb-3 w-full text-white bg-indigo hover:bg-indigo-light rounded-full cursor-pointer "
				 type="submit" value="Create account">
		</form>
		<div class="text-center mt-4">
		  <p class="text-sm text-grey-dark">Already have an account? <a href="#" class="no-underline text-indigo font-bold hover:text-indigo-lighter">Sign in</a></p>
		</div>
	  </div>
	</div>
</div>

Basic

   <div class="shadow-lg flex flex-col-reverse sm:flex-row">
      <div class="w-full p-4">
        <div class="text-grey-darker">
          <h2>Login</h2>
          <p class="mt-2 text-xs text-grey">Lorem ipsum dolor sit amet</p>
        </div>
  
        <form>
          <div class="mt-3">
          <span class="flex bg-grey-lighter items-center">
            <i class="material-icons text-grey-light">person</i>
            <input class="bg-grey-lighter p-2" type="text" placeholder="username">
          </span>
  
            <span class="flex bg-grey-lighter items-center mt-2">
            <i class="material-icons text-grey-light">lock</i>
            <input class="bg-grey-lighter p-2" type="text" placeholder="Password">
          </span>
          </div>
          <div class="flex justify-between items-center mt-4">
            <button class="bg-blue hover:bg-blue-light px-4 py-2 text-white">Login</button>
            <a href="#" class="text-xs underline-none text-blue-light hover:text-blue-dark">Forgot password?</a>
          </div>
        </form>
  
      </div>
      <div class="w-full bg-blue p-4 text-white text-center flex flex-col justify-center ">
  
        <h4>Sign up Now</h4>
        <p class="text-sm mt-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
          eget </p>
        <button class="bg-blue-darker mx-auto hover:bg-blue-dark mt-4 text-white text-sm px-4 py-2 w-3/5">
          Register
        </button>
  
      </div>
</div>