JSFiddle - React, Tailwind, and code Playground

by Alexandru Mihai

HTML

<div id="popupbox"> 
    <form name="login" action="" method="post">
    <center>Username:</center>
    <center><input name="username" size="14" /></center>
    <center>Password:</center>
    <center><input name="password" type="password" size="14" /></center>
    <center><input type="submit" name="submit" value="login" /></center>
    </form>
    <br />
    <center><a href="login('hide');">close</a></center> 
</div> 
<p><a href="login('show');">login</a></p>
<div style="font-style:bold;font-size:30;color:black;">
    Data Platform - Monitor
</div>

CSS

#popupbox{
margin: 0; 
margin-left: 40%; 
margin-right: 40%;
margin-top: 50px; 
padding-top: 10px; 
width: 20%; 
height: 150px; 
position: absolute; 
background: #FBFBF0; 
border: solid #000000 2px; 
z-index: 9; 
font-family: arial; 
visibility: hidden; 
}

JavaScript

function login(showhide){
  if(showhide == "show"){
      document.getElementById('popupbox').style.visibility="visible";
  }else if(showhide == "hide"){
      document.getElementById('popupbox').style.visibility="hidden"; 
  }
}