JSFiddle - React, Tailwind, and code Playground
HTML
<table class="fixed-bar" width="1333" height="48" border="0" align="center">
<tr>
<td width="96" rowspan="2"> </td>
<td><hsso style="font:'Trebuchet MS', Arial, Helvetica, sans-serif; text-shadow:#0C0 0.1em 0.1em 0.3em; color:#030; font-size:32px; text-align:center;">Hallmark Secondary School Alumni</hsso></td>
<td><a class="linear" href="signup">
<span>Sign Up </span>
</a>
</td>
</tr>
<tr>
<td class="nav-bar1" align="left">
</td>
<td width="158" align="left"> </td>
</tr>
</table>
<div style="height: 80px; width: 100%;"></div>
<table width="361" height="891" border="0" align="center" class="tab1" >
<tr>
<td width="467" align="center"><input placeholder="Username" autocomplete="on" class="inp" type="text" name="un" id="un"></td>
</tr>
<tr>
<td align="center"><input placeholder="Password" autocomplete="on" class="inp" type="text" name="pw" id="pw"></td>
</tr>
<tr>
<td align="center"><input placeholder="Re-enter Password" autocomplete="on" class="inp" type="text"></td>
</tr>
<tr>
<td align="center"><input placeholder="First Name" autocomplete="on" class="inp" type="text" name="fn" id="fn"></td>
</tr>
<tr>
<td align="center"><input placeholder="Last Name" autocomplete="on" class="inp" type="text" name="ln" id="ln"></td>
</tr>
<tr>
<td align="center"><select class="sel" name="st" id="st">
<option>Please Select your Set</option>
<option>1997/1998</option>
<option>1998/1999</option>
<optiom>1999/2000</optiom>
<option>2001/2002</option>
<option>2002/2003</option>
<option>2003/2004</option>
<option>2005/2006</option>
<option>2006/2007</option>
<option>2007/2008</option>
<option>2008/2009</option>
<option>2009/2010</option>
...
CSS
table.fixed-bar{
box-shadow:#0C0 0.1em 0.2em 0.5em 0.1em;
border-radius: 8px;
position: fixed;
top: 0;
width: 100%;
left: 0;
clear: both;
background:#fff;
}
table.tab1{
border-radius: 8px;
box-shadow:#0C0 0.1em 0.2em 0.5em 0.1em;
}