JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <header>
    <div id="headercontainer">

        <ul id="headerlinkslist">
          <li id="sitelogo"></li>
          <li><a href="" class="headerlinks">RULES</a></li>
          <li><a href="" class="headerlinks">NEWS</a></li>
          <li><a href="" class="headerlinks">STATS</a></li>
          <li><a href="" class="headerlinks">SUBMIT</a></li>
          <li><a href="" class="headerlinks">LOGIN / REGISTER</a></li>


    </div>


  </header>
</body>

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}

#headercontainer{
  background-color: #4f2f65;
  height: 125px;
  position: relative;
}


#headercontainer ul{
  height: 100%;
  display: table;
  text-align: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

#sitelogo{
  padding-top: 0px;
}

#headercontainer ul li{
  display: table-cell;
  vertical-align: middle;
  position: relative;
}

#headercontainer ul li a {
  color: #fff;
  font-size: 20px;
  text-decoration: none;
}

 a::before{
  content: '';
  display: block;
  height: 0px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  width: 100%;
  transition: all ease-in-out 200ms;
}



a:hover::before{
  height: 125px;
}

header::after{
  content: '';
  display: table;
  clear: both;
}

#headerlinkslist a:hover{
  color: red;
}


.headerlinks{
  padding-left: 80px;
  padding-right: 80px;
}