JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#">Boton</a></li>
    <li><a href="#">Boton</a></li>
    <li><a href="#">Boton</a></li>
</ul>

CSS

ul {
    margin-top: 25px;
    list-style: none;
    padding: 0;
    overflow: auto;
}
ul li {    
    float: left;
}
ul li a{
    display: inline-block;
    padding: 5px 15px; 
    background: rgba(0,0,0,0.2);
    color: white; 
    border-right: dotted 1px rgba(235,208,58,0.4);
    text-decoration: none;
    transition: all 0.8s ease;
}

ul li a:hover {
    background: rgba(235,208,58,1);
    border-right: dotted 1px black;
    color: black;    
}