JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<div class='small-2 columns buttonselector'>
  <label for="content_ki_id_1">
    <input class="invisi-selector" type="radio" value="1" name="content[ki_id]" id="content_ki_id_1" />
    <img src="/assets/circle.svg" />
    <div></div>
  </label>
</div>

CSS

.buttonselector > div {
  width: 100%;
  height: 100%;
  background: #fff;
}

.invisi-selector {
  opacity: 0;
}

.invisi-selector:checked + div {
  border-color: #ba53ad;
  border-width: 4px;
}