JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="nav-bar">
    <ul>
      <li><a href="#">menu</a></li>
      <li><a href="#">contact</a></li>
      <li><a href="#">about us</a></li>
      <li><a href="#">download</a></li>
    </ul>
  </nav>

CSS

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
}
.nav-bar ul{
  display: flex;
  justify-content: flex-end;
  background-color: rgb(48, 46, 46);
}
.nav-bar ul li{
  margin: 1em;
  padding: 0.5em;
  list-style: none;
  font-size: 22px;
  font-weight: bold;
  
}
.nav-bar ul li a{
  display: block;
  text-decoration: none;
  color:white;
}
.nav-bar ul li:hover{
  background-color: rgb(118, 116, 113);
  border-radius: 5px;
}