JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<input type="checkbox" id="checkbox" />
<label for="checkbox"></label>

CSS

#checkbox{
    display: none;
}
#checkbox + label{
    display: block;
    width: 30px;
    height: 30px;
    background: #ccc;
    border: 1px solid #555;    
    text-align: center;    
}
#checkbox + label:before{
    content: '✔';
    font-size: 20px;
}
#checkbox:checked + label{
    border: 1px solid green;    
}
#checkbox:checked + label:before{
    color: green;
}