JSFiddle - React, Tailwind, and code Playground

by Deriv Diggs

HTML

<header>
        	<div class="logo"></div>
                    <form class="form" id="form1" action="login.php" method="post">
                      
                      
                      <p class="email">
                        <input name="email" type="email" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
                      </p>
                      
                      <p class="pass">
                        <input name="password" type="password" class="feedback-input" placeholder="Password" id="pass" />
                      </p>
                      
                      <p class="submit">
                      
                        <input type="submit" value="Log In" id="button-blue"/>
                     
                    </form>
                    
                    <div class="submitholder">
                   		<a href="create_account.html">Create Account</a>
                    </div>
                  	
    	</header>

CSS

html, body {
  	height: 100%;
  	width: 100%;
  	padding: 0;
  	margin: 0;
    font-size: 1em;
    line-height: 1.4;
}

header {
	
	width:100%;
	height:90px;
	vertical-align:middle;
	padding-top:30px;
	background-color:#CCC;
	background-image: url(../images/sl_logo.svg);
	background-repeat: no-repeat; 
	background-position:100px 20px;
}

header p {
	margin:0px;
	/*border: 4px solid #FC0;*/
	
}

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

.feedback-input {
	color:#3c3c3c;
	font-family: Helvetica, Arial, sans-serif;
  	font-weight:500;
	font-size: 18px;
	border-radius: 0;
	line-height: 22px;
	background-color: #fbfbfb;
	padding: 3px 13px 3px 54px;
	margin-bottom: 10px;
	width:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
  	border: 3px solid rgba(0,0,0,0);
	width: 200px;
	height:40px;
	margin-right:20px;
}

.feedback-input:focus {
	background: #fff;
	box-shadow: 0;
	border: 3px solid #3498db;
	color: #3498db;
	outline: none;
  	padding: 3px 13px 3px 54px;
}

.focused {
	color:#30aed6;
	border:#30aed6 solid 3px;
}

/* Icons ---------------------------------- */
#pass {
	background-image: url(../images/pw.svg);
	background-size: 30px 30px;
	background-position: 11px 3px;
	background-repeat: no-repeat;
	
	float:left;
}

#pass:focus {
	background-image: url(../images/pw.svg);
	background-size: 30px 30px;
	background-position: 8px 5px;
  	background-position: 11px 3px;
	background-repeat: no-repeat;
}

#email {
	background-image: url(../images/email.svg);
	background-size: 30px 30px;
	background-position: 11px 3px;
	background-repeat: no-repeat;
	margin-left:40%;
	float:left;
}

#email:focus {
	background-image: url(../images/email.svg);
	background-size: 30px 30px;
  background-position: 11px 3px;
	background-repeat: no-repeat;
}

input:hover, input:focus {
	background-color:white;
}

#button-blue {
	font-family: 'Montserrat', Arial, Helvetica,...