JSFiddle - React, Tailwind, and code Playground

HTML

<div class ="block">
<ul class="nav_top">
<li><a href="#"><span>Пункт меню</span></a></li>
<li><a href="#"><span>Пункт меню</span></a></li>
<li><a href="#"><span>Пункт меню</span></a></li>
<li><a href="#"><span>Пункт меню</span></a></li>
<li><a href="#"><span>Пункт меню</span></a></li>
<li><a href="#"><span>Пункт меню</span></a></li>
<li><a href="#"><span>Пункт меню</span></a></li>
<li><a href="#"><span>Пункт меню</span></a></li>
<li><a href="#"><span>Пункт меню</span></a></li>
<li><a href="#"><span>Пункт меню</span></a></li>
</ul>
</div>

CSS

body{
	padding: 0px;
	margin: 0px;
	background: #1abc9c;
}
.block{
	width: 630px;
	height: 400px;
	background: #FFF;
	padding: 10px;
	margin: 0 auto;
	border-radius: 10px 10px 0 0;
}
.nav_top {margin:0px;padding:0px;}
.nav_top li {
    list-style:none;float:left;text-transform:uppercase;margin: 0 0 0 8px;
}
.nav_top li a {background:url(http://voron.tv/design_cartoon/nav_h.png) 0 -31px no-repeat;height:31px;padding:0 0 0 6px;display:block;color:#817255;text-shadow:0em 0.1em 0em #fff; margin-bottom: 8px;}
.nav_top li a span {background:url(http://voron.tv/design_cartoon/nav_h.png) right top no-repeat;padding:6px 14px 0 8px;height:25px;display:block;font-size:10pt;}

.nav_top li a {
    transition: background 0.25s ease;
}
.nav_top li:hover a {background:url(http://voron.tv/design_cartoon/nav_h.png) right -62px no-repeat;padding:0 14px 0 0;height:31px;display:block;font-size:10pt;color:#fff;text-shadow:0.1em 0.1em 0em #daa902;text-decoration:none;border-radius:8px 0 0 8px;-moz-border-radius:8px 0 0 8px;}
.nav_top li:hover a span {background:url(http://voron.tv/design_cartoon/nav_h.png) 0 -93px no-repeat;height:31px;padding:6px 0 0 14px;display:block;}