JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" name="equipment" value="speaker" id="speaker" class="equipment">
<label class="equipment-lab speaker" for="speaker">
</label>
<input type="checkbox" name="equipment" value="subwoofer" id="subwoofer" class="equipment">
<label class="equipment-lab subwoofer" for="subwoofer">
</label>
<input type="checkbox" name="equipment" value="smoke-machine" id="smoke-machine" class="equipment">
<label class="equipment-lab smokemachine" for="smoke-machine">
</label>

CSS

input[type=checkbox].equipment {
  display: none;
}
label {
  display: inline-block;
  padding: 0 0 0 0px;
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  -o-transition: all 0.25s;
  transition: all 0.25s;
}
.equipment-lab {
  height: 74px;
  width: 74px;
  border-radius: 5px;
}
#speaker:checked + label.speaker {
  background-position: 0px -158px;
  opacity: 1;
}
#subwoofer:checked + label.subwoofer {
  background-position: 79px -158px;
  opacity: 1;
}
#smoke-machine:checked + label.smokemachine {
  background-position: 158px -158px;
  opacity: 1;
}
.speaker {
  background: url(http://i.stack.imgur.com/sOemp.png);
  background-position: 0px -79px;
  opacity: 0.5;
  cursor: pointer;
}
.subwoofer {
  background: url(http://i.stack.imgur.com/sOemp.png);
  background-position: 79px -79px;
  opacity: 0.5;
  cursor: pointer;
}
.smokemachine {
  background: url(http://i.stack.imgur.com/sOemp.png);
  background-position: 158px -79px;
  opacity: 0.5;
  cursor: pointer;
}