JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="my-links">
    <li><a href="#" id="link-1">One</a></li>
    <li><a href="#" id="link-2">Two</a></li>
</ul>

CSS

#my-links li {
    float: left;
    list-style: none;
    text-align: center;
}

#my-links li a {
    background: transparent url('http://i.imgur.com/wKT9VON.png') 0 0 no-repeat;
    color: #FFF;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    height: 20px;
    text-decoration: none;
    width: 70px;
}

#my-links li a#link-1:hover {
    background-position: 0 -20px;
}

#my-links li a#link-2 {
    background-position: -70px 0;
}

#my-links li a#link-2:hover {
    background-position: -70px -20px;
}