JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<style>
.box_content {
background-color: #FFFFFF;
border: 2px solid #AE6948;
left: 35%;
overflow:hidden;
padding: 15px;
position: fixed;
top: 25%;
width:430px;
z-index: 1056;
height:240px;
}
.grayBox{
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1055;
-moz-opacity: 0.7;
opacity:0.7;
filter: alpha(opacity=70);
}
.imgs{
top: 25%;
left: 64%;
position:fixed;}
img#cross {
position: relative;
float: right;
top: -29px;
left: 24px;
}
.form-control{
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.form-group{
margin-bottom:15px;
}
</style>
<!-- Form action change-->
<script type="application/javascript">
function change_client()
{
document.login.action="https://my-eoffice.com/client/postLogin.php";
}
function change_advisor()
{
document.login.action="https://my-eoffice.com/advisor/postLogin.php";
}
function change_employee()
{
document.login.action="https://my-eoffice.com/emp/postLogin.php";
}
</script>
<!--Forgate Password-->
<script language="javascript">
function displayHideBox(boxNumber)
{
if(document.getElementById("LightBox"+boxNumber).style.display=="none") {
document.getElementById("LightBox"+boxNumber).style.display="block";
document.getElementById("grayBG").style.display="block";
} else {
document.getElementById("LightBox"+boxNumber).style.display="none";
document.getElementById("grayBG").style.display="none";
}
}
function forgetpassword()
{
...