JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" name="equipment" value="speakers" id="equipment_0" class="speaker">
<input type="checkbox" name="equipment" value="subwoofer" id="equipment_1" class="subwoofer">
<input type="checkbox" name="equipment" value="smoke-machine" id="equipment_2" class="smokemachine">
<input type="checkbox" name="equipment" value="moving-head" id="equipment_3" class="movinghead">

CSS

input[type=checkbox] {
	display: block;
}
input[type=checkbox] {
	height: 150px;
	width: 150px;
	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;
}
input[type=checkbox] #equipment_0 {
	background: #999;
	opacity: 0.5;
}
input[type=checkbox]:checked #equipment_0 {
	background: green;
	opacity: 1;
}
input[type=checkbox] #equipment_1 {
	background: #999;
	opacity: 0.5;
}
input[type=checkbox]:checked #equipment_1 {
	background: red;
	opacity: 1;
}
.speaker {
	background-image: url(../_assets/b615_150px.png);
    background-position: 25px, 0px;
    background-repeat: no-repeat;
}
.subwoofer {
	background-image: url(../_assets/b1800hp_150px.png);
    background-position: 25px, 0px;
    background-repeat: no-repeat;
}
.smokemachine {
	background-image: url(../_assets/smokemachine_150px.png);
    background-position: 25px, 0px;
    background-repeat: no-repeat;
}
.movinghead {
	background-image: url(../_assets/movinghead_150px.png);
    background-position: 25px, 0px;
    background-repeat: no-repeat;
}