JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Contact</a></li>
    <li><a href='#'>About</a></li>
    <li><a href='#'>Sitemap</a></li>
    <li class='login'><a href='#'>Log In</a></li>
  </ul>
</nav>

CSS

/* Layout */
body{
  background:#eee;
  padding:0;
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
nav ul{
  padding:0;
  width:1200px;
  margin:10px 10px;
  list-style:none;
  text-align:center; /* Cara membuat link navigasi rata tengah. */
}
nav ul li{
  display:inline-block; /* inline-block mengikuti kondisi block dan posisi inline akan tetap di tengah */
  margin-right:-5px;
}
nav ul li a{
  color:#fff;
  background:#ee6666;
  padding:25px 40px;
  display:block;
  text-decoration:none;
  font:700 15px 'open sans',sans-serif;
  text-transform:uppercase;
  transition:all .2s ease-in;
  -moz-transition:all .2s ease-in;
  -webkit-transition:all .2s ease-in;
}
.login a{
  background:#263138;
}
.login a:hover{
  background:#00bfff;
}
nav ul li a:hover{
  background:#222;
}