JSFiddle - React, Tailwind, and code Playground

HTML

<ul>

                          <li>
                           <input id="Jiu" class="cust-checkbox" name="Jiu jitsu" type="checkbox" >
                           <label for="Jiu" class="cust-checkboxLabel">Jiu jitsu</label>
                         </li>
                         <li>
                           <input id="Boxing" class="cust-checkbox" name="Boxing" type="checkbox" >
                           <label for="Boxing" class="cust-checkboxLabel">Boxing</label>
                         </li>
                         <li>
                           <input id="Kick" class="cust-checkbox" name="Kick Boxing" type="checkbox" >
                           <label for="Kick" class="cust-checkboxLabel">Kick Boxing / Muay Thai</label>
                         </li>
                       
</ul>

CSS

.cust-checkbox{
opacity: 0;
position: absolute;
}
.cust-checkbox, .cust-checkboxLabel {
display: inline-block;
vertical-align: middle;
margin: 0px;
cursor: pointer;
font-weight: normal;
display: block;
 position: relative;
 z-index: 2;
font-family: 'robotoregular'
}
.cust-checkbox + .cust-checkboxLabel:before {
 content: '';
background: #fff;
border: 1px solid #787974;
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
margin-right: 15px;
text-align: center;
position: absolute;
right: -7px;
top:2px;
}
.cust-checkbox:checked + .cust-checkboxLabel:before {
content: "";
font-size: 17px;
color: #fff;
line-height: 26px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
background: red;
    border: 2px solid #fff;
    border-radius: 0;
}
.cust-checkbox[disabled] + .cust-checkboxLabel:before{
background: #ccc;
border-color: #aeaeae;
cursor: no-drop;
}
.cust-checkbox[disabled] + .cust-checkboxLabel{
color:  #aeaeae;
cursor: no-drop;
}