JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sidebar">
            <ul>
                <li><a href="">element</a></li>
                <li><a href="">element</a></li>
                <li><a href="">element</a></li>
                <li><a href="">element</a></li>
                <li><a href="">element</a></li>
            </ul>
    </div>

CSS

#sidebar{
    text-align: right;
    float: right;
    background: #009dff;
    opacity: 0.7;
    width: 200px;
    box-sizing: border-box;
}
#sidebar li{
    list-style: none;
    padding-right: 5px;
    border-bottom: 1px solid transparent;
    
}
#sidebar li:hover{
    border-bottom: 1px solid #ff0;
    box-sizing: border-box;
}