JSFiddle - React, Tailwind, and code Playground

HTML

<div class="checkboxes">
    <input type="checkbox" value="1" id="c1" checked="checked" />
    <label class="check" for="c1"></label>
    <input type="checkbox" name="rGroup" id="c2" />
    <label class="check" for="c2"></label>
    <input type="checkbox" name="rGroup" id="c3" />
    <label class="check" for="c3"></label>
</div>

CSS

.checkboxes .check{
    background-color:#c5e043;
    display:inline-block;
    width:30px;
    height:30px
}

.checkboxes input[type=checkbox]{
    display:none
}

.checkboxes input[type=checkbox]:checked + .check{
    position:relative;
    background-color:#241009
}

.checkboxes input[type=checkbox]:checked + .check:after{
    position:absolute;
    content:"\2714";
    color:#fff;
    text-align:center;
    width:100%
}