JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
 <li class="nav__item nav__item--green">пункт номер1</li>
 <li class="nav__item nav__item--yellow">пункт пункт меню 2</li>
 <li class="nav__item nav__item--red">пункт  3</li>

</ul>

CSS

ul.nav
{
  display:flex;
  justify-content: space-between;
}
ul.nav li
{
  padding:1em;
  margin:1em;
  cursor: pointer;
}

.nav__item--green {
  background-color: green;
}

.nav__item--green:hover {
  background-color: chartreuse;
}

.nav__item--yellow {
  background-color: yellow;
}

.nav__item--yellow:hover {
  background-color: darkgoldenrod;
}

.nav__item--red {
  background-color: red;
}

.nav__item--red:hover {
  background-color: tomato;
}