JSFiddle - React, Tailwind, and code Playground

by CR47

HTML

<div class="pe-answer pe-answer_0 pe-answer-checkbox">
    <input type="checkbox" id="pe-ABC-0" name="XYZ" class="pe-checkbox" value="ABC" checked="checked">
    <label for="pe-ABC-0" class="pe-label">ABC</label>
    <input type="checkbox" id="pe-DEF-1" name="XYZ" class="pe-checkbox" value="DEF">
    <label for="pe-DEF-1" class="pe-label">DEF</label>
</div>

CSS

input[type=checkbox].pe-checkbox {
    position: absolute;
    z-index: -1000;
    left: -1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}
input[type=checkbox].pe-checkbox:checked + label.pe-label {
    //background-position: 50% 24px;
    background-size: 23px;
    background-image: url(http://healthyessentials.local/sites/promo1/themes/healthy_essentials_theme/debug/images/checkbox-checked.png);
}
input[type=checkbox].pe-checkbox + label.pe-label {
    padding-bottom: 26px;
    height: 23px;
    display: inline-block;
    line-height: 23px;
    background-repeat: no-repeat;
    //background-position: 0 0;
    font-size: 18px;
    vertical-align: middle;
    cursor: pointer;
}
label.pe-label {
    background-position: 50% 100%;
    background-size: 23px;
    background-image: url(http://healthyessentials.local/sites/promo1/themes/healthy_essentials_theme/debug/images/checkbox-unchecked.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
        
}
label {
    margin-right: 20px;
}
.pe-answer-wrapper {
  width: 50%;
  float: left;
}
.pe-answer {
  display: block;
  text-align: center;
}