JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#">A Sentence</a></li>
    <li><a href="#">A Long Sentence</a></li>
    <li><a href="#">A Longer Sentence</a></li>
    <li><a href="#">A Very Long Sentence</a></li>
   
</ul>

CSS

a {
    background-color: #F78F1E;
    color: #fff;
    display: block;
    font-family: helvetica, sans-serif;
    font-size: 0.688em;
    font-weight: bold;
    padding: 8px 8px;
    text-decoration: none;
    text-transform: uppercase;
    width: auto;
}

li {
    display: block;
    float: left; 
    padding: 3px;
}

li:hover { border: 2px dashed #F78F1E;  }