JSFiddle - React, Tailwind, and code Playground

by swfour

HTML

<input type='checkbox' />

CSS

input[type=checkbox] {
    position:relative;
    margin:5px;
}
input[type=checkbox]:before {
    position:absolute;
    height:30px;
    width:30px;
    top:-5px;
    left:-5px;
    border:2px solid grey;
    content:'';
    background:white;
    border-radius:100%;
}
input[type=checkbox]:after {
    position:absolute;
    display:none;
    height:15px;
    width:15px;
    top:5px;
    left:5px;
    content:'';
    background:grey;
    border-radius:100%;
}
input[type=checkbox]:checked:after {
    display:block;
}