JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tps_block">
  <div id="tps_point1"><a href="#">Point 1</a></div>
  <div id="tps_point2"><a href="#">Point 2</a></div>
  <div id="tps_point3"><a href="#">Point 3</a></div>
</div>

CSS

#tps_block {
    height: 45px;
  width: 940px;
  
}

#tps_block a {
display: block;
width: 100%;
height: 100%;
}
#tps_point1 {
    width: 351px;
    background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") 0 0 no-repeat;
    text-indent: -9999px;
  display: block;
  height: 100%;
  float: left;
}
#tps_point1:hover {
    background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") 0 -45px no-repeat;
}

#tps_point2 {
    width: 284px;
    background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -351px 0 no-repeat;
    text-indent: -9999px;
  display: block;
  height: 100%;
  float: left;
  
}
#tps_point2:hover {
    background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -351px -45px no-repeat;
}

#tps_point3 {
    width: 305px;
    background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -677px 0 no-repeat;
    text-indent: -9999px;
  display: block;
  height: 100%;
  float: left;
}
#tps_point3:hover {
    background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -677px -45px no-repeat;
}