JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<form id="login">
    <ul>
        <li>
            <input id="email" name="email" placeholder="Your Email" title="Your Email" type="email" required />
            <label for="email">Your Email</label>
        </li>
    </ul>
</form>

CSS

#login{font-size: 12px; margin: 0 auto; width: 700px;}
#login li{float: left; list-style: none; margin-left: 30px; position: relative;}
#login li:first-child{margin-left: 0;}

label{line-height: 40px; position: absolute; right: 120px; top: 0; bottom: 0;
    -moz-transition: 0.3s right ease;
    -ms-transition: 0.3s right ease;
    -o-transition: 0.3s right ease;
    -webkit-transition: 0.3s right ease;
    transition: 0.3s right ease;
 	z-index: 0}

input{color: transparent; font-size: 12px; height: 35px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
    -moz-transition: 0.3s all ease;
    -ms-transition: 0.3s all ease;
    -o-transition: 0.3s all ease;
    -webkit-transition: 0.3s all ease;
    transition: 0.3s all ease;}

input[type="email"], input[type="password"]{border: 1px solid #ccc; height: 35px; padding: 0 10px; width: 240px; position: relative; 
	-moz-box-shadow: inset 0 0 10px rgba(0,0,0,.06);
	-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.06);
	box-shadow: inset 0 0 10px rgba(0,0,0,.06);
	z-index: 2;}

input[type="email"]{color: rgba(47,130,194,.8);}

/* Placeholder */
input[type="email"]:-moz-placeholder{color: rgba(47,130,194,.6);}
input[type="email"]:-ms-input-placeholder{color: rgba(47,130,194,.6);}
input[type="email"]::-webkit-input-placeholder{color: rgba(47,130,194,.6);}


/* Label */
input[type="email"] + label{color: rgb(47,130,194);}

input:focus + label{right: 10px;}

input[type="email"]:focus, input[type="password"]:focus{background-color: rgba(255,255,255,.8);}

/* Submit */
input[type="submit"]{
	background-color: #333;
	background: -moz-linear-gradient(bottom, #333, #444);
	background: -ms-linear-gradient(bottom, #333, #444);
	background: -o-linear-gradient(bottom, #333, #444);
	background: -webkit-linear-gradient(bottom, #333, #444);
	background: linear-gradient(bottom, #333, #444);
	border: 1px solid #222; color: #fff; cursor: pointer; height: 35px; width: 110px;
}