JSFiddle - React, Tailwind, and code Playground
HTML
<div id="report-options">
<a href="javascript:void(0);"><div id="Desktop-Button" class="report-option selected" title="Desktop Report"><span class="report-option-icon report-option-icon-desktop"></span><span class="report-option-label">Desktop</span></div></a>
<a href="javascript:void(0);"><div id="Mobile-Button" class="report-option" title="Mobile Report"><span class="report-option-icon report-option-icon-mobile"></span><span class="report-option-label">Mobile</span></div></a>
<a href="javascript:void(0);" style="display:inline"><div id="Tablet-Button" class="report-option" title="Tablet Report"><span class="report-option-icon report-option-icon-tablet"></span><span class="report-option-label">Tablet</span></div></a>
<a href="javascript:void(0);"><div id="Combined-Button" class="report-option" title="Combined Report"><span class="report-option-icon report-option-icon-combined"></span><span class="report-option-label">Combined</span></div></a>
<span style="display: none" id="show-report-for">desktop</span>
</div>
CSS
.report-option:hover {
cursor: pointer;
}
.report-option.selected {
font-weight: bold;
}
.report-option-icon {
background: url(http://assets.clickmotive.com/Reporting/report-options-sprite2.png) no-repeat;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.report-option-icon-desktop {
width: 57px;
height: 54px;
}
.report-option-icon-mobile {
width: 33px;
height: 54px;
}
.report-option-icon-combined {
width: 58px;
height: 54px;
}
.report-option-icon-tablet {
width: 40px;
height: 54px;
}
.report-option-label {
display: block;
text-align: center;
}
#Desktop-Button .report-option-icon
{
background-position: 0 0;
}
#Desktop-Button.selected .report-option-icon, #Desktop-Button:hover .report-option-icon {
background-position: -57px 0;
}
#Mobile-Button .report-option-icon{
background-position: -114px 0;
}
#Mobile-Button.selected .report-option-icon, #Mobile-Button:hover .report-option-icon {
background-position: -147px 0;
}
#Combined-Button .report-option-icon{
background-position: -180px 0;
}
#Combined-Button.selected .report-option-icon, #Combined-Button:hover .report-option-icon {
background-position: -238px 0;
}
#Tablet-Button .report-option-icon
{
background-position: -295px 0px;
}
#Tablet-Button.selected .report-option-icon, #Tablet-Button:hover .report-option-icon {
background-position: -342px 0px;
}
#report-container {
width:1000px;
margin-left:auto;
margin-right:auto;
position:relative;
}