JSFiddle - React, Tailwind, and code Playground

HTML

<div class="linkszima">
    <ul>
        <li class="link1"> <a id="A1" runat="server" href="#"> <img src="http://s10.postimg.org/j1fbosayt/NADA.png"  onmouseover="this.src='http://s7.postimg.org/tztg228s7/Gif_De_Inicio.gif';" onmouseout="this.src='http://s18.postimg.org/ww2tpxsb9/Gif_De_Inicio_Bis.gif';"/>
                            <h2>Inicio</h2>
                        </a>

        </li>
        <li class="link2"> <a id="A2" runat="server" href="#">
                            <h2>Mantenimiento</h2>
                        </a>

        </li>
        <li class="link3"> <a id="A3" runat="server" href="#">
                            <h2>Diseño Web</h2>
                        </a>

        </li>
        <li class="link4"> <a id="A4" runat="server" href="#">
                            <h2>Programas</h2>
                        </a>

        </li>
        <li class="link5"> <a id="A5" runat="server" href="#">
                            <h2>ERP</h2>
                        </a>

        </li>
        <li class="link6"> <a id="A6" runat="server" href="#">
                         <h2>Contacto</h2>
                        </a>

        </li>
    </ul>
</div>

CSS

.linkszima {
    position:relative;
    z-index:200;
    display:block;
    width:750px;
    margin:auto;
    top:159px;
}
.linkszima li {
    display:inline;
}
.linkszima h2 {
    float:left;
    padding:20px 25px 5px 25px;
    font-family:Eurostilemed;
    font-size:1.0em;
    color:#000;
    letter-spacing:2px;
    text-decoration:none;
}
.linkszima a {
    float:left
}
.link1 a {
    height:55px;
}
.link1 img {
    position:absolute;
    padding-left:10px;
    left:46px;
    top:18px;
}