JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<div class="sprites sprite1"></div>
<div class="sprites sprite2"></div>
<div class="sprites sprite3"></div>
</div>
CSS
.sprites {
background-image: url('http://static.tumblr.com/6az34or/hTwmc1qw7/socialmedia-sprites.png');
display: inline-block;
}
.sprite1 {
background-position: 0px 0px;
height: 25px;
width: 25px;
}
.sprite2 {
background-position: 0 34px;
height: 25px;
width: 25px;
}
.sprite3 {
background-position: 0 68px;
height: 25px;
width: 25px;
}