JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left-block">
    <div class="nav-tabs">
    <ul>
        <li class="t"><a href="#">О книге</a></li>
        <li class="t"><a href="#">Наши партнеры</a></li>
        <li class="t a"><a href="#">Вопросы и ответы</a></li>
        <li class="t a"><a href="#">Доставка и оплата</a></li>
        <li class="t"><a href="#">Купить</a></li>
        
    </ul>
        
        
    </div>
</div>

CSS

#left-block{border:1px solid #369;}
#left-block .nav-tabs {position: relative; width: 690px; height: 47px; margin: 25px 0 0 0;}
#left-block .nav-tabs ul {overflow: visible; position: relative; z-index: 2;}

#left-block .nav-tabs li.t a {font: normal 14px Georgia; color: #f00; display: block; text-decoration: none;}
#left-block .nav-tabs li.t a:hover {font: normal 14px Georgia; color: #660100; display: block; text-decoration: none;}

#left-block  .nav-tabs li.t {position: relative; float: left; width: 115px; height:  47px; text-align: center; background: url('./images/nav-tabs.jpg') 0  -47px no-repeat;}
#left-block .nav-tabs  li.t a:hover {position: relative; float: left; width: 115px; height:  47px; text-align: center; background: url('./images/nav-tabs.jpg') 0 0  no-repeat;}
#left-block .nav-tabs  li.selected {position: relative; float: left; width: 115px; height:  47px; text-align: center; background: url('./images/nav-tabs.jpg') 0 0  no-repeat;}

.a { margin-top:-5px;}