JSFiddle - React, Tailwind, and code Playground

HTML

<div id="loginOffBox">
                <div id="centeredBox">
                    <h1>Login</h1>
                    <form action="http://estatepropertysolutions.co.uk/orders/loginv2.cfm" method="post" name="login">
                        <p>User</p>
                        <input maxlength="100" name="the_username" required="yes" size="40" type="text" />
                        <p>Password</p>
                        <input maxlength="15" name="the_password" required="yes" size="40" type="password" />
                        <input name="Submit" type="submit" value="LOGIN" />
                    </form>
                </div>
            </div>

CSS

#centeredBox{  
  position:fixed;
  z-index: 100;  
  /*display: none;*/
  top:50%;
  background-color: #4b4b4d;
  left:50%;
  margin:-100px 0 0 -150px;  
  padding-left: 26px;
  width:300px;  
  height:200px;
  text-align: left;
  z-index: 3000; 
  -webkit-border-radius: 10px;
  font-family: HelNue;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: white;
}

#centeredBox h1{  
    text-align: left;
    margin-top: 15px;
    font-size: 24px;
}  
#centeredBox p{  
    margin-top: 5px;
}  
#centeredBox input{
    height: 20px;
}
#loginOffBox{
    z-index: -1;
    left: 0;
    top: 0;
    background-color: green;
    /*display:none;*/
    position: absolute;
    width: 100%;
    height:100%;
}

JavaScript

$(document).ready(function(){
    $("#loginOffBox").click(function(){
        $('#loginOffBox').hide();
          $('#centeredBox').hide();
    });
    // other js
    $("#centeredBox").click(function(e) {
       e.stopPropagation();
    });
});
function showBox(){
  $('#centeredBox').fadeIn("slow");
   $('#loginOffBox').show();
}