JSFiddle - React, Tailwind, and code Playground

by jungalist

HTML

<input id="example-checkbox" type="checkbox">
<label for="example-checkbox"> Example checkbox</label>

CSS

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + label:before {
    content: '\00a0'; /* non-breaking space */
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    font-size: 1em;
    font-family: 'Arial Unicode MS';
    border: 1px solid #999999;
    color: #30BB02;
    background:#ffffff;
    text-align: center;
    cursor: pointer;
    border-radius:3px;
    -webkit-border-radius: 3px
}   
    
input[type="checkbox"]:checked + label:before {
    content: '\2714'; /* check mark */
    background:#E7FFDF;
    border-color:#30BB02
}