JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<br>
<div class="bg-menu">
<div class="bg-menu-title">
<div class="title-class">Меню сайта</div></div>
<ul>
<li><a href="">Главная</a></li>
<li><a href="">Главная</a></li>
<li><a href="">Главная</a></li>
<li><a href="">Главная</a></li>
<li><a href="">Главная</a></li>
<li><a href="">Главная</a></li>
</ul>
</div>

CSS

.bg-menu {
   background: url(http://savepic.su/3495657.png) repeat-y;
   position: relative;
   width:191px;
   margin:33px 0 11px;
   padding:5px;
   display:block;
}
.bg-menu:after {
    content: "";
    background: url(http://savepic.su/3488489.png) no-repeat;
    display: block;
    width:190px;
    height:11px;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: -11px;
}
.bg-menu:before {
    content: "";
    background: url(http://savepic.su/3477225.png) no-repeat;
    display: block;
    width:190px;
    height:33px;
    position: absolute;
    left: 0px;
    right: 0px;
    top:-33px;
} 

.bg-menu-title {
	background:url(http://savepic.su/3479273.png) no-repeat; 
	width:187px; 
	height:33px;
	position:absolute;
	top:-40px;
	left:2px;
	}
.title-class {
    color:#FFF;
    font-size:13px;
    margin:7px 59px;
}

.bg-menu ul {
    margin:0; 
    padding:0; 
    clear:both;
}

.bg-menu ul li {
    list-style:none;
}

.bg-menu ul li a {
    display: block; /* <-- NEED */
    
    color:#FFF;
    text-decoration:none;
    font-weight:normal;
    font-size:15px;
    background:url(http://savepic.su/3483363.png) no-repeat;
    width:199px;
    height:27px;
    margin:0 56px;
    padding:0 10px;
}

.bg-menu ul li a:hover {
    background:url(http://savepic.su/3531488.png) no-repeat;
    margin:0 -9px;
    padding:0 75px;
}