JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

  <body>
    <div class="container">
      <form class="form-signin" role="form">
          <h4 class="form-signin-heading">Please sign in</h4>
          <input type="username" class="form-control username" placeholder="Username" required="autofocus" />
          <span class="help-inline pull-left">Please correct the error</span>
          <input type="password" class="form-control password" placeholder="Password" /> 
          <span class="help-inline pull-left">Please correct the error</span>
          <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;
}

.form-signin {
  max-width: 330px;
  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;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input.username {
  margin-bottom: -1px;
  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 {
  margin-bottom: 30px;
  display: inline-block;
  width: 100%;
}
.delete-users label {
  margin-right: 20px;
}
.customers {
  margin-bottom: 10px;
}
.customers select {
  width:...