JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://img69.imageshack.us/img69/1456/8lof.png"></script>
<div id="login">
<div id="login-head">Login Page Template</div>
<div id="login-form">
<div class="ico"></div>
<div class="ico"></div>
<form>
<input class="input" name="user" value="User Name"/>
<input class="input" type="password" name="password" value="Password"></input>
<input class="button" type="submit" name="submit" value="Login >"/>
</form>
</div>
</div>
CSS
*{
margin:0;
padding:0;
}
@font-face {
font-family: HerrVonMuellerhoff;
src: url(https://dl.dropboxusercontent.com/s/qnira6jwcatce07/HerrVonMuellerhoff.ttf?token_hash=AAGJMkvtU89mKCruhPVX6LDrSpc1SbY7rXQWrNgZaUlTkQ&dl=1);
}
#login {
margin:0 auto;
margin-top: 300px;
width: 670px;
height:335px;
border-radius:5px;
-webkit-box-shadow: 0 0 100px 2px rgba(127,127,127,0.5) inset ;
-moz-box-shadow: 0 0 100px 2px rgba(127,127,127,0.5) inset;
box-shadow: 0 0 100px 15px rgba(127,127,127,0.4) inset;
}
#login-head {
position:relative;
margin: 0 auto;
top:30px;
width:360px;
height:90px;
font: 48.41pt HerrVonMuellerhoff;
}
#login-form {
position:relative;
margin: 0 auto;
top: 50px;
width: 355px;
}
.input {
font: 14pt Lucida Sans Unicode;
color: #6e6e6e;
width:335px;
height:48px;
padding-left:22px;
border:0;
border-radius: 5px;
margin-bottom:16px;
background:#000000;
}
.ico {
position:absolute;
width:14px;
height:16px;
}
.ico:nth-child(1) {
top:16px;
right:10px;
background: url(http://img69.imageshack.us/img69/1456/8lof.png) no-repeat -0px -0px;
}
.ico:nth-child(2) {
top:81px;
height:14px;
right:10px;
background: url(http://img69.imageshack.us/img69/1456/8lof.png) no-repeat -0px -17px;
}
.button {
width: 97px;
height:40px;
border: 1px solid #c4c4c4;
border-radius:5px;
background: -webkit-linear-gradient(bottom, #cdcdcd, #ffffff );
background: -moz-linear-gradient(bottom, #cdcdcd, #ffffff );
background: -ms-linear-gradient(bottom, #cdcdcd, #ffffff );
background: linear-gradient(bottom, #cdcdcd, #ffffff );
font: 14pt Lucida Sans Unicode;
}