JSFiddle - React, Tailwind, and code Playground

by Eric Farley

HTML

<div class='views'>
  <div class='view'>
    <span class='sprite-icon one'></span>
  </div>
  <div class='view'>
    <span class='sprite-icon two'></span>
  </div>
  <div class='view'>
    <span class='sprite-icon three'></span>
  </div>
</div>

CSS

.views {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.view {
  height: 105px;
  text-align: center;
  width: 105px;
}

.sprite-icon {
  background-image: url('http://67.media.tumblr.com/b2336d673e315081b6d657f8258c313d/tumblr_mv98xzSiJu1qhori9o1_500.jpg');
  display: inline-block;
  height: 35px;
  width: 35px;
}

.sprite-icon.one {
  background-position: 0 0;
}

.sprite-icon.two {
  background-position: 0 35px;
}

.sprite-icon.three {
  background-position: 0 70px;
}