JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>
    <div id="header">
        <div id="headerContent">
            <!-- Banner / Logo -->
        </div>
        <nav id="main-nav">
            <ul>
                <li id="selected"><a href="#">Home</a>
                </li>
                <li><a href="#">About</a>
                </li>
                <li><a href="#">Blog</a>
                </li>
                <li><a href="#">Contact</a>
                </li>
            </ul>
        </nav>
    </div>
    <div id="wrapper"></div>
    <footer></footer>
</body>

</html>

CSS

* {
  margin: 0px;
  padding: 0px;
  outline: none;
}

#header {
  background-color: #00a0c8;
  min-height: 118px;
}

#headerContent {
  width: 980px;
  min-height: 118px;
  margin: 0 auto;
  background-color: #00a0c8;
}

nav {
  width: 980px;
  margin: 0 auto;
}

nav li {
  border-left: 1px solid #fff; /* Added border to nav li */
  display: block;
  float: left;
  height: 50px; /* Give it height */
}

#main-nav li:hover {
  background: #0BC6F5; /* Give background color to li on hover */
}

nav li:first-child {
  border-left: none;
}

#main-nav li a {
  display: block;
  padding-top: 15px;
  text-align: center;
  height: 35px;
  font-size: 18px;
  line-height: 18px;
  color: #fff;
  text-decoration: none;
  background-color: #00a0c8;
}

#main-nav li a:first-child, #main-nav li a:nth-child(2) {
  width: 224px;
}

#main-nav li a:nth-child(3) {
  width: 225px;
}

#main-nav li a:last-child {
  width: 224px;
}

#main-nav li a:hover {
  height: 30px;
}