JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a id='a1' href='#'>item1</a>
    </li>
    <li>
        <a id='a2' href='#'>item2</a>
    </li>
    <li>
        <a id='a3' href='#'>item3</a>
    </li>
</ul>

CSS

li{display:inline-block;}

/* Here is the important part */
a{
    /* general dimentions */
    display:block;height:30px;
    /* sprites */
    background:url(http://blog.arieh.co.il/images/menu.gif) no-repeat;
    
    /* hiding text */
    text-indent:-999px;  overflow:hidden;
}

/* Positioning background */
#a1{width:31px;}
#a2{width:32px;  background-position:-31px 0;}
#a3 { width:34px; background-position:-63px 0;}