JSFiddle - React, Tailwind, and code Playground

HTML

<input type='checkbox' value='valuable4' id="valuable4"/>
                <label for="valuable4">
                    <span></span>
                </label>

CSS

input[type=checkbox] {
    visibility: hidden;
}

label span
{
    height: 25px;
    width: 25px;
    position: absolute;

    left: 107px;
    cursor: pointer;
    border: 1px solid lightblue;
}
input[type=checkbox]:checked + label span
{
    content: url("https://cdn2.iconfinder.com/data/icons/basicset/tick_64.png") no-repeat;
    height: 25px;
    width: 25px;
    cursor: pointer;
     border: 1px solid red;
}