JSFiddle - React, Tailwind, and code Playground

HTML

<div id="loginscreen">
    <div id="logHead">
        <div id="headLeft">Login:</div>
        <div id="headRight"><div id="logX">X</div></div>
    </div>
    <div id="logTop">
        <div id="logUN"><input type="text" id="username" placeholder="user"/></div>
        <div id="logPW"><input type="text" id="password" placeholder="pass"/></div>
    </div>
    <div id="logBott">
        <button>Login</button>
    </div>
</div>
<input type="button" id="mybutt" value="Login" />

CSS

div{position:relative;box-sizing:border-box;}
#loginscreen {
    position: absolute;
    width: 400px;
    height: auto;
    top:0;
    right: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: lightgrey;
    z-index: 1000;
    display:none;
}
#logHead{width:100%;height:40px;padding:5px;background:darkcyan;color:white;overflow:hidden;}
  #headLeft{float:left;width:80%;}
  #headRight{float:right;width:20px;padding:5px;border:1px solid green;cursor:pointer;}
#logTop{width:100%;padding:20px;}
#logUN{width:100%;}
#logPW{width:100%;}
#logBott{width:100%;padding-left:80%;overflow:hidden;}
#loginscreen input{font-size:1.5rem;border:1px solid #ddd;}
button{font-size:1.5rem;color:white;background:darkcyan;cursor:pointer;}
#mybutt{position:absolute;bottom:150px;left:50px;}

JavaScript

$('#mybutt').click(function(){
		$('#loginscreen').fadeIn(800);
});
$('#logX').click(function(){
		$('#loginscreen').fadeOut(800);
});