JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<h2>Modal Login Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-primary" id="myBtn">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group col-sm-6">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
<span style="color:red;" id="username_span"></span>
</div>
<div class="form-group col-sm-6">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="form-group col-sm-6">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Date</label>
<input type="text" class="form-control" id="usrname" placeholder="Date">
</div>
<div class="form-group col-sm-6">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> DOB</label>
<input type="text" class="form-control" id="usrname" placeholder="DOB">
</div>
<div class="form-group col-sm-6">
...
JavaScript
$(document).ready(function() {
$("#myBtn").click(function() {
$("#myModal").modal();
});
$("#login").click(function() {
$("#username_span").text("Invalid user name or password. check username or passord");
$("#myModal").modal('hide');
});
$("#myModal").on('hidden.bs.modal', function (e) {
$("#myModal").removeData('bs.modal');
});
});