JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu__list">
  <li class="menu__item">
    <a href="" class="menu__link">пункт 1</a>
  </li>
  <li class="menu__item">
    <a href="" class="menu__link">пункт 1</a>
  </li>
  <li class="menu__item">
    <a href="" class="menu__link">пункт 1</a>
  </li>
  <li class="menu__item">
    <a href="" class="menu__link">пункт 1</a>
  </li>
  <li class="menu__item">
    <a href="" class="menu__link">пункт 1</a>
  </li>
  <li class="menu__item">
    <a href="" class="menu__link">пункт 1</a>
  </li>
</ul>

CSS

body {
  background: #363636;
}
.menu__list .menu__item {
  list-style: none;
  display: inline-block;
}
.menu__list .menu__item .menu__link:hover {
  background: #fff;
}
.menu__link {
  color: #fff;
  text-decoration: none;
  padding: 1em;
}
.menu__item:after {
  content: '';
  display: inline-block;
  border-right: 1px solid #fff;
  height: 1em;
  vertical-align: middle;
}
.menu__item:after:hover {
  border-right: none;
}
.menu__list .menu__item:hover .menu__link {
  color: #363636;
}