JSFiddle - React, Tailwind, and code Playground

by ds345

HTML

<div id="topbar">
    <div style="width:960px;margin:auto"></div>
</div>
<form id="login">
     <h1>Log In</h1>

    <fieldset id="inputs">
        <input id="username" type="text" placeholder="Username" autofocus="true" required="true" />
        <input id="password" type="password" placeholder="Password" required="true" />
    </fieldset>
    <fieldset id="actions">
        <input type="submit" id="submit" value="Log in" /> <a href="">Forgot your password?</a><a href="">Register</a>

    </fieldset>
</form>

CSS

#topbar {
    background: url("http://thesearethings.com/img/topbar.png") repeat scroll left top transparent;
    height: 75px;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5000
}
#topbar img {
    float: left;
}
body {
    font: 12px'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;
    margin: 0;
    background-color: #CBCBC1;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#CBCBC1), to(#B6AEA1));
    background-image: -webkit-linear-gradient(top, #CBCBC1, #B6AEA1);
    background-image: -moz-linear-gradient(top, #CBCBC1, #B6AEA1);
    background-image: -ms-linear-gradient(top, #CBCBC1, #B6AEA1);
    background-image: -o-linear-gradient(top, #CBCBC1, #B6AEA1);
    background-image: linear-gradient(top, #CBCBC1, #B6AEA1);
}
/*--------------------*/
 #login {
    background-color: #B6AEA1;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#CBCBC1), to(#B6AEA1));
    background-image: -webkit-linear-gradient(top, #CBCBC1, #B6AEA1);
    background-image: -moz-linear-gradient(top, #CBCBC1, #B6AEA1);
    background-image: -ms-linear-gradient(top, #CBCBC1, #B6AEA1);
    background-image: -o-linear-gradient(top, #CBCBC1, #B6AEA1);
    background-image: linear-gradient(top, #CBCBC1, #B6AEA1);
    height: 240px;
    width: 400px;
    margin: -150px 0 0 -230px;
    padding: 30px;
    position: absolute;
    top: 70%;
    left: 50%;
    z-index: 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, .2), 0 3px 0 #fff, 0 4px 0 rgba(0, 0, 0, .2), 0 6px 0 #fff, 0 7px 0 rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 1px 1px 0 rgba(0, 0, 0, .1), 3px 3px 0 rgba(255, 255, 255, 1), 4px 4px 0 rgba(0, 0, 0, .1), 6px 6px 0 rgba(255, 255, 255, 1), 7px 7px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, .2), 0 3px 0 #fff, 0 4px...