JSFiddle - React, Tailwind, and code Playground

by bluetidepro

HTML

<a href="#1" class="aGrade">A</a>
<a href="#2" class="bGrade">B</a>
<a href="#3" class="cGrade">C</a>
<a href="#4" class="dGrade">D</a>
<a href="#5" class="fGrade active">F</a>

CSS

a{
    height:29px;
    display:block;
    float:left;
    margin:0;
    padding:0;
    width:74px;
    text-indent:-9999em;
    background: url('https://photos-1.dropbox.com/t/0/AABlq8VoYaFAbpl9ctAFPfenuaNaAi50F3T76tegBWzfeA/10/712911/png/1024x768/2/1354057200/0/2/GradePicker-gradesSprite.png/J7LCqGeZvylMbYx-H5-Ot_Iz_A-ZgGmcOXDUMIm7NSo') 0 0 no-repeat;}
a.aGrade{background-position:0 0;}
a.aGrade.active{background-position:0 -58px;}
a.aGrade:hover{background-position:0 -29px;}

a.bGrade{background-position:-74px 0;}
a.bGrade.active{background-position:-74px -58px;}
a.bGrade:hover{background-position:-74px -29px;}

a.cGrade{background-position:-148px 0;}
a.cGrade.active{background-position:-148px -58px;}
a.cGrade:hover{background-position:-148px -29px;}

a.dGrade{background-position:-223px 0;}
a.dGrade.active{background-position:-223px -58px;}
a.dGrade:hover{background-position:-223px -29px;}

a.fGrade{background-position:-296px 0;}
a.fGrade.active{background-position:-296px -58px;}
a.fGrade:hover{background-position:-296px -29px;}