JSFiddle - React, Tailwind, and code Playground

HTML

<footer>
   <div id="iconos">
       <p class="contacts">CONTACTS</p>
       <ul>
       <li class="icono1"><a href="#">Item1 </a></li>
       <li class="icono2"><a href="#">Item2 </a></li>
       <li class="icono3"><a href="#">Item3 </a></li>
       </ul>
     
   </div>
 </footer>

CSS

/* SPRITES ICONOS */
#iconos{
    position:absolute;
    bottom:25px;
    right:25px;
}

#iconos p,
#iconos ul {
vertical-align: middle;
display:inline-block;
padding:0 10px;}
#iconos ul li{
display:inline;}
#iconos ul li a{
    height:28px;
    width:28px;
    text-indent:-9999em; /* oculta el texto */
    display:inline-block;
    background:url(http://i819.photobucket.com/albums/zz119/jakijem/sprite_iconos_vert_2_zpsde6da52e.png);}

#iconos ul li.icono1 a:hover{
    background-position:0 -28px;}
#iconos ul li.icono2 a{
    background-position:0 -56px;}
#iconos ul li.icono2 a:hover{
    background-position:0 -84px;}
#iconos ul li.icono3 a{
    background-position:0 -112px;}
#iconos ul li.icono3 a:hover{
    background-position:0 -140px;}