JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <p>
    <input class="img" type="checkbox" id="checkbox_1" name="checkbox[]" value="1"/>
    <label for="checkbox_1"><img src="http://ruby-china.org/assets/logo_48.png"/></label>
  </p>
  <p>
    <input class="img" type="checkbox" id="checkbox_2" name="checkbox[]" value="2" />
    <label for="checkbox_2"><img src="http://ruby-china.org/assets/logo_48.png"/></label>
  </p>

  <hr />

  <p>
    <input class="img" type="radio" id="radio_1" name="radio[]" value="1" />
    <label for="radio_1"><img src="http://ruby-china.org/assets/logo_48.png"/></label>
  </p>
  <p>
    <input class="img" type="radio" id="radio_2" name="radio[]" value="2" />
    <label for="radio_2"><img src="http://ruby-china.org/assets/logo_48.png"/></label>
  </p>
</form>

CSS

input.img {
  display: none;
}
input.img + label {
  border: 1px dotted transparent;
  display: inline-block;
  opacity: .7;
}
input.img:checked + label {
  border-color: red;
  opacity: 1
}