JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Select View Type</h2>

<ul id="ViewTypeContainer">
    <li><a id="calendarView" href="#"><span class="text">Select Calendar View</span></a></li>
    <li><a id="grdView" href="#"><span class="text">Select Grid View</span></a></li>
</ul>

CSS

#ViewTypeContainer {
    list-style: none;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
}

#ViewTypeContainer li,
#ViewTypeContainer li a {
    display: inline-block;
}

#ViewTypeContainer li a {
    width: 82px;
    height: 82px;
}

#calendarView {
    background: url('http://i.stack.imgur.com/kaQxv.png') 0 0;
}

#grdView  {
    background: url('http://i.stack.imgur.com/kaQxv.png') -170px 0;
}

#ViewTypeContainer li a .text {
    position: absolute;
    left: -9999px;
}
}