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-block;
    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%;
}