JSFiddle - React, Tailwind, and code Playground

by devangkantharia

HTML

<!DOCTYPE html>
<body>
    <div class="container">
        <form class="form-signin form-inline" role="form">
             <h4 class="form-signin-heading">Please sign in</h4>

            <div class="controls">
                <input type="username" class="form-control username" placeholder="Username" required="autofocus" /> <span class="help-inline pull-right">Please correct the error</span>

            </div>
            <div class="controls">
                <input type="password" class="form-control password" placeholder="Password" /> <span class="help-inline pull-right">Please correct the error</span>

            </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
        </form>
    </div>
    <!-- /container -->
    <!-- Bootstrap core JavaScript==================================================- ->
    <!-- Placed at the end of the document so the pages load faster -->
</body>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 body {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #eee;
}
.controls > span {
    padding-top: 10px;
}
.form-signin {
    max-width: 380px;
    padding: 15px;
    margin: 0 auto;
}
.form-signin .form-signin-heading, .form-signin .checkbox {
    margin-bottom: 10px;
}
.form-signin .checkbox {
    font-weight: normal;
}
.form-signin .form-control {
    position: relative;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    font-size: 16px;
    margin-bottom: 10px;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin input.username {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.form-signin input.password {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.tcol .navbar-form .form-group {
    margin-bottom: 4px;
}
.logo {
    margin: 100px 0 10px 0;
}
.no-bg {
    background: none;
}
.navbar-inverse .navbar-nav>li>a, .navbar-inverse .navbar-brand {
    color: #FFF;
}
.no-top {
    margin-top: 0;
}
.top {
    padding-top: 30px;
}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus {
    background: #6B6A6A;
}
.navbar-inverse .navbar-nav>li>a.no-link:hover {
    background: none;
}
.navbar-form .form-group {
    width: 178px;
}
.navbar {
    margin-bottom: 10px;
}
hr {
    padding: 0;
    margin: 0 0 20px 0;
}
.header {
    background-color: #eee;
    margin-bottom: 10px;
}
@media (max-width: 991px) {
    .navbar-right {
        float: left!important;
    }
}
@media (max-width: 768px) {
    .navbar-text {
        margin: 0;
    }
    .navbar-form {
        margin-top: 0;
    }
    .navbar-inverse .navbar-text {
        margin: 15px;
    }
}
.delete-users {
   ...