JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
      <ul id="menu">
          <li class="sprite"><a href="#" class="active"><span>You Are Here</span></a></li>
          <li class="sprite"><a href="#A"><span>Contact</span></a></li>
          <li class="sprite"><a href="#B"><span>Projects</span></a></li>
      </ul>
    </body>
    </html>

CSS

#menu {
      left:10px;
      top:50px;
      height:300px;
      width: 147px;
      position:fixed;
    
    }
    
    .sprite a {
      background: url('http://www.jp2code.net/logos/jp2Rollover.png') 0 -100px no-repeat;
      color:Red;
      height:50px;
      display: block; 
      width:147px;    
    }
    .sprite a:hover {
      background-position: 0 0;
      color:Yellow;
    }
    .sprite a.active {
      background-position: 0 -50px;        
    }
    .sprite span {
      padding-left: 50px;        
    }