JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul>
    <li><a class="nav" href="#">HOME</a></li>
    <li><a class="nav" href="#">DAFTAR KOMIK</a></li>
    <li><a class="nav" href="#">DAFTAR VIDEO</a></li>
    <li><a class="nav" href="#">FILM BIOSKOP</a></li>
    <li><a class="nav" href="#">GAME</a></li>
    <li><a class="nav" href="#">GROUP</a></li>
    <li><a class="nav" href="#">OST ANIME</a></li>
    <li><a class="nav" href="#">PARTNER</a></li>
    <li><a class="nav" href="#">CONTACT</a></li>
  </ul>
</nav>

CSS

ul {
	  list-style-type: none;
	  overflow: hidden;
	  background-color: white;
	  position: relative;
	  top: -20px;
	}
	
	nav{
	}
	
	.nav {
	  height: 20px;
	  width: 100px;
	  margin-top: 12px;
	  padding: 0;
	  line-height: 10px;
	  float: left;
	  display: inline-block;
	}

	a.nav,a {
	  font-family: Arial, Helvetica, sans-serif;
	  font-weight: normal;
	  font-size: 15px;
	  display: block;
	  color: white;
	  text-align: center;
	  padding: 14px 16px;
	  text-decoration: none;
	  background-color: #333;
	}

	a.nav:hover,a.nav:focus,a:hover,a:focus {
	  color: white;
	  background-color: black;
	}