JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="container">
<section id="content">
<form action="">
<h1>Login</h1>
<div>
<input type="text" placeholder="Usuario" required="" id="username" />
</div>
<div>
<input type="password" placeholder="Contraseña" required="" id="password" />
</div>
<div class="enter">
<input type="submit" value="Entrar" />
</div>
</form>
<!-- form -->
</section>
<!-- content -->
</div>
<!-- container -->
<script src="js/index.js"></script>
</body>
CSS
body {
background: #DCDDDF url(http://cssdeck.com/uploads/media/items/7/7AF2Qzt.png);
color: #000;
font: 14px Arial;
margin: 0 auto;
padding: 0;
position: relative;
}
h1 {
font-size: 28px;
}
h2 {
font-size: 26px;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 14px;
}
h6 {
font-size: 12px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #563D64;
}
small {
font-size: 10px;
}
b,
strong {
font-weight: bold;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.left {
float: left;
}
.right {
float: right;
}
.alignleft {
float: left;
margin-right: 15px;
}
.alignright {
float: right;
margin-left: 15px;
}
.clearfix:after,
form:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container {
margin: 25px auto;
position: relative;
width: 900px;
}
#content {
background: #f9f9f9;
background: -moz-linear-gradient(top, rgba(248, 248, 248, 1) 0%, rgba(249, 249, 249, 1) 100%);
background: -webkit-linear-gradient(top, rgba(248, 248, 248, 1) 0%, rgba(249, 249, 249, 1) 100%);
background: -o-linear-gradient(top, rgba(248, 248, 248, 1) 0%, rgba(249, 249, 249, 1) 100%);
background: -ms-linear-gradient(top, rgba(248, 248, 248, 1) 0%, rgba(249, 249, 249, 1) 100%);
background: linear-gradient(top, rgba(248, 248, 248, 1) 0%, rgba(249, 249, 249, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9', GradientType=0);
-webkit-box-shadow: 0 1px 0 #fff inset;
-moz-box-shadow: 0 1px 0 #fff inset;
-ms-box-shadow: 0 1px 0 #fff inset;
-o-box-shadow: 0 1px 0 #fff inset;
box-shadow: 0 1px 0 #fff inset;
border: 1px solid #c4c6ca;
margin: 0 auto;
padding: 25px 0 0;
position: relative;
text-align: center;
text-shadow: 0 1px 0 #fff;
width: 400px;
}
#content h1 {
color: #7E7E7E;
font: bold 25px Helvetica, Arial, sans-serif;
letter-spacing: -0.05em;
line-height: 20px;
...