JSFiddle - React, Tailwind, and code Playground

by ahmadka

HTML

<div id="tps_block">
  <a id="tps_point1" href="#">We Sell Blu-rays</a>
  <a id="tps_point2" href="#">3D 'Errific</a>
  <a id="tps_point3" href="#">Free Shipping in Pakistan</a>
</div>

CSS

#tps_block {
    height: 43px;
    width: 940px;
}
#tps_point1 {
    width: 351px;
    background: url("http://i.imgur.com/AZNYckm.png") 0 0 no-repeat;
    text-indent: -9999px;
    display: block;
    height: 100%;
    float: left;
}
#tps_point1:hover {
    background: url("http://i.imgur.com/AZNYckm.png") 0 -43px no-repeat;
}
#tps_point2 {
    width: 284px;
    background: url("http://i.imgur.com/AZNYckm.png") -351px 0 no-repeat;
    text-indent: -9999px;
    display: block;
    height: 100%;
    float: left;
}
#tps_point2:hover {
    background: url("http://i.imgur.com/AZNYckm.png") -351px -43px no-repeat;
}
#tps_point3 {
    width: 305px;
    background: url("http://i.imgur.com/AZNYckm.png") -635px 0 no-repeat;
    text-indent: -9999px;
    display: block;
    height: 100%;
    float: left;
}
#tps_point3:hover {
    background: url("http://i.imgur.com/AZNYckm.png") -635px -43px no-repeat;
}