JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="login-form">
     <h1>Gonna Fly Now</h1>
     <div class="form-group ">
       <input type="text" class="form-control" placeholder="Username " id="UserName">
       <i class="fa fa-user"></i>
     </div>
     <div class="form-group log-status">
       <div class="f-view">
         <input type="password" class="form-control" placeholder="Password" id="Passwod">
         <i class="fa fa-lock"></i>
         <i class="view-pass fa fa-eye"></i>
       </div>
       <span class="alert">Invalid Credentials <i class="fa fa-thumbs-down"></i></span>
     </div>
     
     <button type="button" class="log-btn" >Log in</button>
     <a class="link" href="#">Lost your password?</a>
    
   </div>

CSS

.login-form {
  width: 350px;
  padding: 40px 30px;
  background: rgba(25, 186, 255, 0.5);
  position: fixed;
  bottom: 0;
  top: 0;
}
.form-group {
  position: relative;
  margin-bottom: 15px;
}
.form-control {
  width: 100%;
  height: 50px;
  border: none;
  padding: 5px 7px 5px 35px;
  background: #fff;
  color: #aaa;
  border: 1px solid #ddd;
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
.form-control:focus {
  border-color: #19BAFF;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
  color: #19BAFF;
}
.form-group .fa {
  position: absolute;
  left: 15px;
  top: 17px;
  color: #ccc;
}
.form-group .view-pass {
  left: auto;
  right: 15px;
  cursor: pointer;
  color: #ccc;
  display: none;
}
.form-group .view-pass:hover {
  color: #666666;
}
.form-control:focus + .fa {
  color: #19BAFF;
}
.log-status.wrong-entry .form-control,
.wrong-entry .form-control + .fa {
  border-color: #ed1c24;
  color: #ed1c24;
}
.log-btn {
  background: #FFA500;
  dispaly: inline-block;
  width: 100%;
  font-size: 16px;
  height: 50px;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  border: none;
  box-shadow: 0px -3px #c98104 inset;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
.log-btn:active {
  margin-top: 2px;
  margin-bottom: -2px;
  box-shadow: 0px -1px #c98104 inset;
}
.link {
  text-decoration: none;
  text-align: center;
  color: #fff;
  display: block;
  font-size: 13px;
  margin-top: 15px;
}
.link:hover {
  text-decoration: underline;
}
.alert {
  background: #f00;
  color: #fff;
  width: 100%;
  height:...