JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pic-top-nav">
                <div class="vline-1"></div>
                <div class="pic-nav" id="glavn"><a href="#1">Главная</a></div>
                <div class="pic-nav" id="servis"><a href="#2">Сервис</a></div>
                <div class="pic-nav" id="kontakt"><a href="#3">Контакты</a></div>
                <div class="pic-nav" id="poisk"><a href="#4">Поиск</a></div>
                <div class="pic-nav" id="karta"><a href="#5">Карта сайта</a></div>
</div>

CSS

.pic-top-nav{     height:100%; }

.pic-nav{
    float:left;
    width:74px;
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
    text-align:center;
    height:55px;
    margin:10px 0 0;
    background:url(http://alexforce2.6te.net/img/home.png) no-repeat 50% 0;
} 
.pic-top-nav #servis{
    background:url(http://alexforce2.6te.net/img/service.png) no-repeat 50% 0;
} 
.pic-top-nav #kontakt{
    background:url(http://alexforce2.6te.net/img/contacts.png) no-repeat 50% 0;
} 
.pic-top-nav #poisk{
    background:url(http://alexforce2.6te.net/img/search.png) no-repeat 50% 0;
} 
.pic-top-nav #karta{
    background:url(http://alexforce2.6te.net/img/sitemap.png) no-repeat 50% 0;
} 
.pic-nav a{
    padding-top:46px;
    display:inline-block;
    height:11px;
    width:100%;
    text-decoration:none;
    color:#0f0f0f;
    background: url(http://alexforce2.6te.net/img/header-vlive.png) repeat-y 100% 0; }