JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navtoolbar">
<div class="links">
        <ul>
                <li><a href="/project/profile" class="profile">Мой профиль</a></li>
                <li><a href="/project/servers" class="servers">Сервера</a></li>
                <li><a href="/project/balance" class="balance">4500.43 руб.</a></li>
                <li><a href="/project/account" class="account">Настройки аккаунта</a></li>
                
        </ul>
</div>
</div>

CSS

#navtoolbar .links ul li {
                        border: 1px solid blue;
                        list-style-type: none;
                        display: inline-block;
                        padding: 0px 0px 0px 0px;
                        background: url('./navigation/nav-rule.png') 0 50% no-repeat;

                        font-size: 14px;
                }
                
                #navtoolbar .links ul li a {
                        color: #555555;
                        padding: 0px 5px 0px 30px;
                        line-height: 38px;
                        background: transparent;
                        text-decoration: none;
                        background-position: center left;
                        background-repeat:   no-repeat;
                }
                
                #navtoolbar .links ul li:hover{
                        background: whiteSmoke;
                        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f4f4f4'
,endColorstr='#d6d6d6');
                        background: -webkit-gradient(linear,0% 0,0% 100%,from(#f4f4f4),to(#d6d6d6));
                        background: -moz-linear-gradient(270deg,#f4f4f4,#d6d6d6);
                }

/* ToolBar Links images */
#navtoolbar .links ul a.profile{
        background-image: url('./navigation/profile.png');
}

#navtoolbar .links ul a.servers{
        background-image: url('./navigation/servers.png');
}