JSFiddle - React, Tailwind, and code Playground

by Alex Str

HTML

<div class="wrapper">
    <span class="icon-1"></span>
    <span class="icon-2"></span>
    <span class="icon-3"></span>
    <span class="icon-4"></span>
</div>

CSS

.wrapper {
    background: gray;   
    width: 100px;
    height: 100px;
}

span {
    width: 15px;
    height: 15px;
    display: block;
    background: url('http://i.imm.io/1k8tK.png');
}
.icon-1 {
  background-position: 0 0;  
}
.icon-2 {
   background-position: 16px 0; 
}
.icon-3 {
   background-position: 34px 0; 
}
.icon-4 {
   background-position: 52px 0; 
}