JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <input type="checkbox" id="c1" name="cc" />
    <label for="c1"><div>&#x2714;</div>Check Box 1<br /></label>
    <input type="checkbox" id="c12" name="cc" />
    <label for="c12"><div>&#x2714;</div>Check Box 2<br /></label>
</html>

CSS

input[type="checkbox"] {
    opacity: 0;
    position: absolute;
}
input[type="checkbox"] + label {
    text-align:center;
    cursor:pointer;
}
input[type="checkbox"]:focus + label {
    background-color: #ddd;
}
input[type="checkbox"] + label div {
    display:inline-block;
    line-height: 16px;
    font-size: 12px;
    height: 16px;
    width: 16px;
    margin:-0px 4px 0 0;
    border: 1px solid black;
    color: transparent;
}
input[type="checkbox"]:checked + label div {
    color: black;
}

JavaScript

// Using opacity 0 instead of display none means 
// the checkbox is still tabbable and hence accessible by keyboard

// position absolute positions the input checkbox top left of the drawn box