JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="navbar-btn">
<button id="loginbutton" type="button" class="btn btn-primary" data-target="#login" data-toggle="modal">Login</button>
</li>
<li class=" navbar-btn">
<button type="button" class="btn btn-success"><a href="./register.jsp">Create account</a>
</button>
</li>
</ul>
</div>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Login</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" action="login" method="post">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input name="email" type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<labl for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input name="password" type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10 pull-right">
...