JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu bubplastic horizontal aqua"> 

<ul> 

<li><span class="menu_r"><a href="?controlador=Persona&accion=formulario"><span class="menu_ar"><b>Persona</b></span></a></span></li> 

<li><span class="menu_r"><a href="?controlador=Geocentros&accion=formulario"><span class="menu_ar"><b>Geo Centros</b></span></a></span></li> 

<li><span class="menu_r"><a href="?controlador=Geo&accion=formulario"><span class="menu_ar"><b>Territorio</b></span></a></span></li> 
<li><span class="menu_r"><a href="?accion=partidos"><span class="menu_ar"><b>Partidos</b></span></a></span></li> 

<li><span class="menu_r"><a href="?accion=ubv"><span class="menu_ar"><b>UBV</b></span></a></span></li> 
<li><span class="menu_r"><a href="#"><span class="menu_ar"><b>Estadisticas</b></span></a></span></li> 
<li><span class="menu_r"><a href="#"><span class="menu_ar"><b>Usuarios</b></span></a></span></li> 
<li><span class="menu_r"><a href="?accion=salir"><span class="menu_ar"><b>Salir</b></span></a></span></li> 

</ul><br class="clearit" /> 
</div>

CSS

.bubplastic.horizontal {
    width: 100%;
    height: 27px;
    margin: 0;
    padding: 0;
    
background: #000000 url(../image/bg-bubplastic.gif) top left repeat-x;
}
 
 
.bubplastic.horizontal ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
 
 
.bubplastic.horizontal ul li {
    float: left;
    margin: 0;
    padding: 0;
    background: transparent url (../image/bg-bubplastic-button.gif) top left no-repeat;
}
.bubplastic.horizontal ul li a {
    display: block;
    height: 27px;
    padding-left: 30px;
    float: left;
    
text-transform: uppercase;
    font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
    
font-size: 70%;
    color: #FFFFFF;
    text-decoration: none;
}
 
 
.bubplastic.horizontal ul li a span.menu_ar {
    display: block;
    float: left;
    height: 22px;
    
padding-top: 5px;
    padding-right: 35px;
    background: transparent url(../image/bg-bubplastic-button.gif) top right no-repeat;
    cursor: pointer;
}
 
 
 
/* END BUBBLE PLASTIC HORIZONTAL MENU */
/* AQUA HOVER */
 
 
.bubplastic.aqua ul li a:hover,
.bubplastic.aqua ul li.highlight a {
    background:
 transparent url(../image/bg-bubplastic-h-aqua.gif) top left repeat-x;
}
 
 
.bubplastic.aqua ul li a:hover span.menu_ar,
.bubplastic.aqua ul li.highlight a span.menu_ar 
{
    background: transparent url(../image/bg-bubplastic-h-aqua.gif) top right repeat-x;
}