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">
            <span class="fl-prefsEditor-switchOn">
                <span class="fl-prefsEditor-switchOn-indicator">✔</span>
                <span class="fl-prefsEditor-switchOn-label">ON</span>
            </span>
            <span class="fl-prefsEditor-switchOff">
                <span class="fl-prefsEditor-switchOff-indicator">✔</span>
                <span class="fl-prefsEditor-switchOff-label">OFF</span>
            </span>
        </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 fl-input-enhance">
            <span class="fl-prefsEditor-switchOn">
                <span class="fl-prefsEditor-switchOn-indicator">✔</span>
                <span class="fl-prefsEditor-switchOn-label">ON</span>
            </span>
            <span class="fl-prefsEditor-switchOff">
                <span class="fl-prefsEditor-switchOff-indicator">✔</span>
                <span class="fl-prefsEditor-switchOff-label">OFF</span>
            </span>
        </span>
    </label>
</div>

CSS

.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-switchOn,
.fl-prefsEditor-switchOff {
    border: solid 2px #000000;
    border-radius: 0.2rem;
    width: 20em;
}

.fl-prefsEditor-switchOn {
    border-color: transparent;
}

.fl-prefsEditor-switchOn .fl-prefsEditor-switchOn-indicator {
    visibility: hidden;
}

.fl-prefsEditor-switchOff {
    font-weight: bold;
    font-size: 1.2em;
    margin-left: 1em;
}

input:checked + label .fl-prefsEditor-switchOn {
    border: solid 2px #000000;
    border-radius: 0.2rem;
    font-weight: bold;
    font-size: 1.2em;
}

input:checked + label .fl-prefsEditor-switchOn .fl-prefsEditor-switchOn-indicator {
    visibility: visible;
}

input:checked + label .fl-prefsEditor-switchOff {
    border-color: transparent;
    font-size: 1em;
    font-weight: normal;
    margin-left: 1.35em;
}

input:checked + label .fl-prefsEditor-switchOff .fl-prefsEditor-switchOff-indicator {
    visibility: hidden;
}

.fl-prefsEditor-switchOn-indicator,
.fl-prefsEditor-switchOff-indicator {
    padding-left: 0.2rem;
}

.fl-prefsEditor-switchOn-label {
    padding-right: 0.5em;
}

.fl-prefsEditor-switchOff-label {
    padding-right: 1em;
}

.fl-input-enhance {
    font-size: 120%;
}