JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navborder">
<ul id="ie">
<li><a href="#">Home</a></li>
<li><a href="#">Assignments</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Random</a></li>
</ul>
</div>
<div id="mainbody">
<table id="table">
<thead>
	<tr>
			<td colspan="2">Ello</td>
	</tr>
</thead>
	<tr>
		<td>Hello</td>
		<td>hello v2</td>
	</tr>
	<tr>
		<td>Hello</td>
		<td>hello v2</td>
	</tr>
</table>

</div>
<div id="mainfooter">

</div>

CSS

body{
background-color:#ececec;
}
#navborderline{
width:50%;
margin:auto;
margin-top:5px;
height:2px;
background-color:black;
}
#navborder ul{
text-align:center;
}
#navborder ul li{
list-style-type:none;
display:inline;
margin-left:5%;
margin-right:5%;
}
#navborder a{
text-decoration:none;
color:black;
font-size:18px;
border-bottom:1px solid transparent;
 -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
#navborder a:hover{
border-bottom:1px solid red;
}
#navborder {
margin-top:10px;
}
#table{
width:60%;
margin:auto;
margin-top:5px;
text-align:center;
}
#table td, tr{
border: 1px solid black;
width:50%;
}