JSFiddle - React, Tailwind, and code Playground

HTML

<div> 
<ul>
    <li> <a href="#">короткое слово</a></li>
    <li> <a href="#">длинное слово</a></li>
    <li> <a href="#">очень длинное слово</a></li>
    <li> <a href="#">пиу</a></li>
  
    
    
</ul>
</div>

CSS

ul {width: 700px; height: 1000px; background: black; border-radius: 5px; margin-left: 20px;}
a {color: white; text-decoration: none; font-size: 25px;  }
a:hover{  border: solid 2px white; border-radius: 9px;  background: #212121;}

li{display: inline;}