JSFiddle - React, Tailwind, and code Playground

HTML

<form method="POST" action="../cgi-bin/webcm" target="_self" id="uiPostForm" > 
<input type="hidden" name="var:main" value="menu" id="uiPostMenuMain"> 
<input type="hidden" name="var:style" value="style5" id="uiPostMenuStyle"> 
<input type="hidden" name="getpage"   value="../html/defs/style5/menus/menu.html" id="uiPostGetPage"> 
<input type="hidden" name="errorpage" value="../html/index.html" id="uiPostErrPage"> 
<input type="hidden" name="var:pagename" value="home" id="uiPostPageName"> 
<input type="hidden" name="var:errorpagename" value="home" id="uiPostErrorPageName"> 
<input type="hidden" name="var:menu" value="home" id="uiPostMenu"> 
<input type="hidden" name="var:menutitle" value="Home" id="uiPostMenuTitle"> 
<input type="hidden" name="var:pagetitle" value="Home" id="uiPostPageTitle"> 
<input type="hidden" name="var:pagemaster" value="home" id="uiPostPageMaster"> 
<input type="hidden" name="" value="<? error found ?>" id="uiPostErrorState" disabled> 
<input type="hidden" name="login:command/username" value="" id="uiPostUserName">  
<input type="hidden" name="login:command/password" value="" id="uiPostPassword"> 
</form> 
 
<!-- Outer Table--> 
<table width=761 cellpadding=0 cellspacing=0 align=center border=0> 
 <tr><td width=761 height=36 nowrap></td></tr> 
 <tr> 
    <td width=761 align=left valign=top> 
     
    <!-- Main Page --> 
    <form onsubmit="return false;"> 
     
    <table cellspacing=1 border=0 cellpadding=4 align=center id="uiViewBodyTable" bgcolor="#000000" width="760" height="390"> 
    <tr> 
        <td bgcolor="#000000" height=22 class="header"><font size=1 color="#FFFFFF">Please Log In to continue.</font></td> 
    </tr> 
    <tr> 
        <td bgcolor="#ECECEC"> 
     
      <table cellspacing=0 border=0 cellpadding=0 align=center id="uiViewBodyTable" width=300> 
       <tr><td colspan=2 align=center class="header">Log In</td></tr> 
       <tr><td colspan=2 height=8></td></tr> 
       <tr><td colspan=2 height=1...

CSS

body { 
    margin: 0px 0px; 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    font-size: 9pt; 
    font-weight: normal; 
    text-decoration: none; 
    color: #2A2A2A; 
} 
p, td { 
} 
.header 
{ 
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
  font-size: 8pt; 
  font-weight: bold; 
} 
.inputButton 
{ 
    border-color: #505050; 
    border-width: 1px; 
    background-color: #9595C7; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-weight: Bold; 
    font-size: 11px; 
    color: #FFFFFF; 
    width: 61px; 
    height: 18px; 
    vertical-align: middle; 
    margin: 4px; 
}

JavaScript

function uiDoOnLoad() 
{ 
  document.getElementById("uiViewUserName").value=document.getElementById("uiPostUserName").value; 
  document.getElementById("uiViewUserName").focus() 
  //top.resizeTo(1024,780); 
  if(document.getElementById("uiPostErrorState").value=="1") 
   document.getElementById("uiViewErrorMessage").style.color="#CC3366"; 
} 
function uiDoSave() 
{ 
  document.getElementById("uiPostUserName").value=document.getElementById("uiViewUserName").value; 
  document.getElementById("uiPostPassword").value=document.getElementById("uiViewPassword").value; 
  document.getElementById("uiPostForm").submit(); 
}