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: 99999; 
-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: 100;
    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
});
function showBox(){
  $('#centeredBox').fadeIn("slow");
   $('#loginOffBox').show();
}