JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fl-prefsEditor-onoff">
    <input type="checkbox" id="toc-choice" class="flc-prefsEditor-toc" />
    <label for="toc-choice" tabindex=0>
    	<span class="flc-prefsEditor-toc-descr"></span>
        <span class="fl-prefsEditor-switch" data-checkboxStateOn="ON" data-checkboxStateOff="OFF">
        </span>
    </label>
</div>

<div class="fl-prefsEditor-onoff">
    <input type="checkbox" id="toc-choice2" class="flc-prefsEditor-toc" />
    <label for="toc-choice2" tabindex=0>
    	<span class="flc-prefsEditor-toc-descr"></span>
        <span class="fl-prefsEditor-switch" data-checkboxStateOn="ON" data-checkboxStateOff="OFF">
        </span>
    </label>
</div>

CSS

html {
    /* font-size: 30px; */
}

.fl-prefsEditor-onoff {
    padding: 1rem;
}

.fl-prefsEditor-onoff input {
    border: 0 none;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.fl-prefsEditor-switch {
    border: solid 2px #C7C7C8;
    border-radius: 0.2rem;
    padding: 0.6rem;
}

.fl-prefsEditor-switch:before,
.fl-prefsEditor-switch:after {
    border: solid 2px #000000;
    border-radius: 0.2rem;
}

.fl-prefsEditor-switch:before {
    content: attr(data-checkboxStateOn);
    padding: 0.125rem 1.75rem;
    border-color: transparent;
}

input:checked + label .fl-prefsEditor-switch:before {
    content: "✓ " attr(data-checkboxStateOn);
    border-color: #000000;
    font-weight: bold;
    padding-left: 0.6875rem;
    padding-right: 1.5rem;
}

.fl-prefsEditor-switch:after {
    content: "✓ " attr(data-checkboxStateOff);
    font-weight: bold;
    padding: 0.125rem;
    padding-right: 1.125rem;
}

input:checked + label .fl-prefsEditor-switch:after {
    content: attr(data-checkboxStateOff);
    font-weight: inherit;
    border-color: transparent;
    padding-left: 1.1875rem;
    padding-right: 1.25rem;
    margin-left: 0.25rem;
}