JSFiddle - React, Tailwind, and code Playground
HTML
<table style="width:100%;padding:0;margin:0;border-collapse: collapse;border-spacing: 0;">
<tr>
<td id="tdHomeMenu" style="padding:0;margin:0;border-collapse: collapse;" class="navBarItemContainer">
<a href="Index.aspx">
<div style="text-align:center;margin-top:10px;">
<img src="Images/menu_home.png" />
<div style="text-align:center;margin-top:8px;color:black;">Home</div>
</div>
</a>
</td><td style="padding:0;margin:0;border-collapse: collapse;" id="tdBookingRequestsMenu" class="navBarItemContainer">
<a href="BookingRequests.aspx">
<div style="text-align:center;margin-top:10px;">
<img src="Images/menu_newbooking.png" />
<div style="text-align:center;margin-top:8px;color:black;">Booking Requests</div>
</div>
</a>
</td><td style="padding:0;margin:0;border-collapse: collapse;" id="tdProfileMenu" class="navBarItemContainer">
<a href="Profile.aspx">
<div style="text-align:center;margin-top:10px;">
<img src="Images/menu_school_profile.png" />
<div style="text-align:center;margin-top:8px;color:black;">School Profile</div>
</div>
...
CSS
.navBarItemContainer {
background-color:#e5e5e5;width:25%;display:inline-block;
margin:0px;
border-collapse: collapse;
color:black;
height:90px;
}
.navBarItemContainer_selected {
background-color:#efefef;width:25%;display:inline-block;
margin:0px;
border-bottom:4px solid #fece00;
color:black;
border-collapse: collapse;
height:90px;
}
#navcontainer ul li {
display: inline;
width:200px;
}
noBordertable, .noBordertable td {
border:0;background:none;margin:0;padding:0;
}