JSFiddle - React, Tailwind, and code Playground

by mikeys4u

HTML

<label>Please tick</label>
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1"></label>

CSS

.regular-checkbox {
    display: none;
}
.regular-checkbox + label {
    border: 2px solid #8BC53F;
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
    position: relative;
}
  
.regular-checkbox:checked + label {
    border: 2px solid #8BC53F;
}
.regular-checkbox:checked + label:after {
    content: '\2714';
    font-size: 20px;
    position: absolute;
    top: -5px;
    left: 2px;
}