JSFiddle - React, Tailwind, and code Playground

by Anisuzzaman Khan

HTML

<body>
    <div id="page">
        <div id="header">
            <div style="float: left;">Please Login</div>
        </div>
        <div id="content">
            <p>
            <form action="" method="post">
                <label for="un">Username</label>
                <input type="text" id="un" placeholder="username" />
                <br/>
                <label for="pw">Password</label>
                <input type="password" id="pw" placeholder="password" />
                <br/>
                <input type="submit" value="Login" />
            </form>
            </p>
        </div>
        <div id="footer">
            <div style="float: right;">copyright 2014</div>
        </div>
    </div>
</body>

CSS

body {
    margin:20px;
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    background-color:#555
}
div {
    text-align:center
}
#page {
    background-color:#fff;
    margin:0 auto;
    text-align:left;
    width:755px;
    padding:0 10px
}
#header {
    border-bottom:0px solid #000;
    height:30px;
    line-height:30px
}
/* Begin Navigation Bar Styling */
 #nav {
    text-align:center;
    line-height: 30px;
}
#nav ul {
    text-align:center;
    font-size:11px;
    width:100%;
    margin:0;
    padding:0;
    display:inline-block;
    list-style:none;
    background-color:#f2f2f2;
    border-bottom:1px solid #ccc;
    border-top:1px solid #ccc
}
#nav li {
    margin:auto;
    display:inline-block
}
#nav li a {
    display:block;
    padding:8px 15px;
    text-decoration:none;
    font-weight:700;
    color:#069;
    border-right:1px solid #ccc
}
#nav li a:hover {
    color:#c00;
    background-color:#fff
}
/* End navigation bar styling. */
 #content {
    height: 200px;
    width:100%;
    display: table;
    background:none repeat scroll 0 0 none;
}
#content p {
    display: table-cell;
    vertical-align: middle;
}
#footer {
    height:30px;
    line-height:30px;
    border-top: 1px solid #000;
    font-size:9pt
}
#footer p {
    float: right;
}
.clear {
    clear: both;
}

#content form {
    display: table-cell;
    vertical-align: middle;
}