JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<ul class="container">
  <li class="item"><a href="">Home</a></li>
  <li class="item"><a href="">About</a></li>
  <li class="item"><a href="">Services</a></li>
  <li class="item"><a href="">Contact</a></li>
</ul>

</body>

CSS

@import url('https://fonts.googleapis.com/css?family=Kumar+One');

a{
  text-decoration: none;
  font-family: 'Kumar One', cursive;
}


.container{
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}

.item{
  width: 8em;
  text-align: center;
  background-color: #10999e;
}


.item:hover{
  background-color: #0b6c70;
}