JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

input[type=checkbox].equipment {
	display: none;
}
label {
	display: inline-block;
	padding: 0 0 0 0px;
	-webkit-transition: opacity 0.25s;
  -moz-transition: opacity 0.25s;
  -o-transition: opacity 0.25s;
	transition: opacity 0.25s;
}
.equipment-lab {
	height: 150px;
	width: 150px;
	border-radius: 5px;
}


input[type=checkbox]:checked + label.speaker {
	background: url(http://www.djscimmia.com/new-web/_assets/b615_150px.png);
	opacity: 1;
}
input[type=checkbox]:checked + label.speaker:checked {
	background: url(http://www.djscimmia.com/new-web/_assets/b615_150px.png);
	opacity: 1;
}
input[type=checkbox]:checked + label.subwoofer {
	background: url(http://www.djscimmia.com/new-web/_assets/b1800hp_150px.png);
	opacity: 1;
}
input[type=checkbox]:checked + label.smokemachine {
	background: url(http://www.djscimmia.com/new-web/_assets/smoke_150px.png);
	opacity: 1;
}



.speaker {
	background: url(http://www.djscimmia.com/new-web/_assets/b615_150px.png);
	opacity: 0.5;
	cursor: pointer;
}
.speaker:checked {
	background: url(http://www.djscimmia.com/new-web/_assets/b615_150px.png);
	opacity: 1;
	cursor: pointer;
}
.subwoofer {
	background: url(http://www.djscimmia.com/new-web/_assets/b1800hp_150px.png);
	opacity: 0.5;
	cursor: pointer;
}
.smokemachine {
	background: url(http://www.djscimmia.com/new-web/_assets/smoke_150px.png);
	opacity: 0.5;
	cursor: pointer;
}