JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrap">
<input type='checkbox' name='thing' value='valuable' id="thing" />
<label class="mark" for="thing"></label>
</div>
<label for="thing">Remember me</label>
<br />
<input type='checkbox' id="standard" />
<label for="standard"></label>
CSS
#wrap {
display: inline-block;
width: 15px;
height: 15px;
border: 1px solid lightgrey;
}
#thing {
position: absolute;
visibility: hidden;
}
#thing + .mark + label {
display: inline;
}
#thing + .mark {
background: transparent;
height: 9px;
width: 9px;
display:inline-block;
padding: 0 0 0 0px;
margin-left: 3px;
margin-bottom: 3px
}
#thing:checked + .mark {
background: #0080FF;
height: 9px;
width: 9px;
display:inline-block;
padding: 0 0 0 0px;
}