JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>
      <a href="\">Главная</a>
  </li>
  <li>
      <a href="\">Основные документы</a>
  </li>
  <li>
      <a href="\">Приказы</a>
  </li>
  <li>
      <a href="\">Последние новости новости новости</a>
  </li>
</ul>

CSS

li{
float:left;
width:100px;
height:100px;
}
li a{
width:100px;
height:100px;
display:inline-block;
vertical-align:middle;
background:#333;
    color:#fff;
}
li a:after {
    width:0px;
    height:100px;
    vertical-align:middle;
    content:"";
    display:inline-block;
}