JSFiddle - React, Tailwind, and code Playground

HTML

<div class="checkbox">
<input id="remember_me" class="remember-me" type="checkbox" value="1" name="remember_me">
<label for="remember_me">
<div class="text"> Remember password </div>
</label>
</div>

CSS

.checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 10px;
    position: relative;
}
[type="checkbox"]:not(:checked) + label::before, [type="checkbox"]:checked + label::before {
    background: white none repeat scroll 0 0;
    border: 1px solid #aaa;
    content: "";
    height: 28px;
    left: 0;
    position: absolute;
    top: 2px;
    width: 28px;
}

[type="checkbox"]:not(:checked) + label::after {
    opacity: 0;
    transform: scale(0);
}
[type="checkbox"]:not(:checked) + label::after, [type="checkbox"]:checked + label::after {
    color: #09ad7e;
    content: "✔";
    font-size: 32px;
    left: 4px;
    line-height: 0.8;
    position: absolute;
    top: 3px;
    transition: all 0.2s ease 0s;
}
type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label {
    cursor: pointer;
    padding-left: 25px;
    position: relative;
}

.radio label, .checkbox label {
    cursor: pointer;
    font-weight: normal;
    margin-bottom: 0;
    min-height: 20px;
    padding-left: 20px;
    font-size: 1.125rem;
    line-height:32px;
    font-weight: normal;
    display: inline-block;
    margin-bottom: 5px;
}