JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="c1" name="cc" />
 <label for="c1"><span>4</span></label>

CSS

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    padding:5px;
    padding-left:10px;
    padding-right:10px;
    width:30px;
    height:30px;
    margin: 0 4px 0 0;
    vertical-align:middle;
    background: none;
    cursor:pointer;
    line-height: 14px;
    text-align: center;
    border: solid 1px #000000;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

input[type="checkbox"]:checked + label span {
    background-color: rgba(153, 153, 153, .7);
    border: none;
}

input[type="checkbox"]:checked + label {
    color: green;
}