JSFiddle - React, Tailwind, and code Playground

HTML

<body id="admin">

<div id="header">
<center><h2>OMS Tutoring Database</h2></center>
</div>
<div class="nav-container">
<ul>
  <a class="tutor-button" href="tutoring.php"><li>Tutoring List</li></a>
  <a class="add-button" href="addform.php"><li>Add Students</li></a>
  <a class="admin-button" href="admin.php"><li>Admin</li></a>
</ul>
</div>

<div id="content"></div>

</body>

CSS

html *{
  font-family: Verdana, Geneva, sans-serif;
}
body {
  padding:0px;
  margin:0px;
}
.nav-container {
  width:660px;  
  margin: 0 auto;
}
.nav-container ul {
  padding: 0px;
  list-style:none;
  float:left;
  width: 100%
}
.nav-container ul li {
  display: inline;
}
.nav-container ul a {
  text-decoration:none;
  padding:5px 0;
  width:33%;
  color: #ffffff;
  background: #317b31;
  float:left;
  border-left: 1px solid #fff;
  text-align:center;
}
.nav-container ul a:hover {
  background: #92e792;
  color: black;
}
#add-form .add-button, #tutor-list .tutor-button, #admin .admin-button {
  color: #ffffff;
  background: #12b812;
}