JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li><span class="item1"></span></li>
  <li><span class="item2"></span></li>
  <li><span class="item3"></span></li>
</ul>

SCSS

ul {
  li {
    background: #262626;
    width: 109px;
    height: 109px;
    margin-left: 20px;
    list-style: none;
    border-radius: 50%;
    float: left;
    span {
     &.item1 {
       &:after {
          content: "";
          background: transparent url('https://s11.postimg.org/rrxo3gsz7/sprite_test.png') 0 0 no-repeat;
          width: 70px;
          height: 52px;
          display: inline-block;
        }
      }
       &.item2 {
       &:after {
          content: "";
          background: transparent url('https://s11.postimg.org/rrxo3gsz7/sprite_test.png') -70px -8px no-repeat;
          width: 23px;
          height: 32px;
          display: inline-block;
        }
      }
      &.item3 {
       &:after {
          content: "";
          background: transparent url('https://s11.postimg.org/rrxo3gsz7/sprite_test.png') -93px 0 no-repeat;
          width: 52px;
          height: 52px;
          display: inline-block;
        }
      }
    }
  }
}