JSFiddle - React, Tailwind, and code Playground

by anAgent

HTML

<div class="body">
    <div id="login-wrapper">
        <div id="login-header" class="top-round">
            <div class="login-left">
                <span class="icon-wrap-lb-less"><span class="icon-block-black key-tw-b"></span>Summit Login</span>
            </div>
            <div class="login-right">
                <a href="#" title="Admin Panel"><img src="http://ziown.com/liquid-noise-back/images/logo-login.png" width="142" height="58" alt="Admin Panel"></a>
            </div>
        </div>
        <div class="login-box bottom-round">
            <form>
                <ul>
                    <li><label>Username</label><input name="" type="text" value="jhone" class="login-text-box"></li>
                    <li><label>Password</label><input name="" type="password" value="123456" class="login-text-box usr"></li>
                    <li><label>&nbsp;</label><input name="" type="Submit" class="submit-button-login" value="Login"><input name="" type="Submit" class="submit-button-login pass" value="Cancle"></li>
                    <li><label>&nbsp;</label><span class="rem-check"><input name="" type="checkbox" value=""></span><span class="rem-text">Remember Me</span></li>
                </ul>
            </form>
        </div>
    </div>
</div>

CSS

body {
    font:12px/18px Arial,Helvetica,sans-serif;
    color:#1f1f1f;
    background:#888 url(http://ziown.com/liquid-noise-back/images/classy_fabric.png) repeat fixed;
width:100%; height:100%;
}
#header,#shortcur-bar,#footer,.titlebar,#sidenav li a,#sidenav li a:hover,#sidenav li a.active,#usermenu a:hover,.widget-top,.qq-upload-button,.submit-button,.submit-button-login,#login-header {
    background:url(http://ziown.com/liquid-noise-back/images/bar-sprite.png) repeat-x;
}
.login-wrapper {
    width:370px;
    margin:12% auto;
    overflow:hidden;
    position:relative;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    box-shadow:0 0 10px #000;
    -moz-box-shadow:0 0 10px #000;
    -webkit-box-shadow:0 0 10px #000;
}
.login-box {
    background:url(http://ziown.com/liquid-noise-back/images/dark-pattern.jpg) repeat;
}
.login-box ul {
    padding:10px 15px;
}
.login-box li {
    clear:both;
    list-style:none;
    margin-bottom:7px;
    position:relative;
    color:#fff;
}
.login-box li label {
    display:block;
    width:10em;
    float:left;
    padding-top:4px;
}
.login-text-box {
    width:62%;
    border:#333 1px solid !important;
    padding:5px 3px;
    background:#fff url(http://ziown.com/liquid-noise-back/images/input-boxt.png) repeat-x top;
    -moz-border-radius:5px;
    border-radius:5px;
}
.rem-check {
    display:inline-block;
    position:absolute;
    top:2px;
}
.rem-text {
    padding-left:20px;
}
#login-header {
    height:58px;
    background-position:0 -251px;
    border-bottom:#0c0e11 1px solid;
}
.login-left {
    width:150px;
    float:left;
    padding-top:10px;
    text-shadow:0px 1px #e9f3fb;
}
.login-right {
    width:200px;
    float:right;
    text-align:right;
}
.icon-wrap-lb-less {
    height:20px;
    display:inline-block;
    position:relative;
    margin:10px 0 0 10px;
    line-height:20px;
}/*------------------BUTTONS-------------------*/
.submit-button-list {
   ...