JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-body">
                <legend>User Login</legend>
                <form role="form">
                    <div class="form-group">
                        <label for="inputEmail">Username</label>
                        <input id="inputEmail" type="text" class="form-control" placeholder="ex: John.Doe" required="" />
                    </div>
                    <div class="form-group">
                        <label for="inputPassword">Password</label>
                        <input id="inputPassword" type="password" class="form-control" placeholder="*******" required="" />
                    </div>
                    <div class="checkbox">
                        <label>
                            <input id="chkRememberMe" type="checkbox" />Remember Me</label>
                    </div>
                    <button id="btnSubmit" type="submit" class="btn navbar-custom">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>

CSS

/*!
 * Bootstrap v3.0.2 by @fat and @mdo
 * Copyright 2013 Twitter, Inc.
 * Licensed under http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world by @mdo and @fat.
 */

/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display:block
}
audio, canvas, video {
    display:inline-block
}
audio:not([controls]) {
    display:none;
    height:0
}
[hidden], template {
    display:none
}
html {
    font-family:sans-serif;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%
}
body {
    margin:0
}
a {
    background:transparent
}
a:focus {
    outline:thin dotted
}
a:active, a:hover {
    outline:0
}
h1 {
    margin:.67em 0;
    font-size:2em
}
abbr[title] {
    border-bottom:1px dotted
}
b, strong {
    font-weight:bold
}
dfn {
    font-style:italic
}
hr {
    height:0;
    -moz-box-sizing:content-box;
    box-sizing:content-box
}
mark {
    color:#000;
    background:#ff0
}
code, kbd, pre, samp {
    font-family:monospace, serif;
    font-size:1em
}
pre {
    white-space:pre-wrap
}
q {
    quotes:"\201C""\201D""\2018""\2019"
}
small {
    font-size:80%
}
sub, sup {
    position:relative;
    font-size:75%;
    line-height:0;
    vertical-align:baseline
}
sup {
    top:-0.5em
}
sub {
    bottom:-0.25em
}
img {
    border:0
}
svg:not(:root) {
    overflow:hidden
}
figure {
    margin:0
}
fieldset {
    padding:.35em .625em .75em;
    margin:0 2px;
    border:1px solid #c0c0c0
}
legend {
    padding:0;
    border:0
}
button, input, select, textarea {
    margin:0;
    font-family:inherit;
    font-size:100%
}
button, input {
    line-height:normal
}
button, select {
    text-transform:none
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    cursor:pointer;
    -webkit-appearance:button
}
button[disabled], html input[disabled] {
    cursor:default
}
input[type="checkbox"],...