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-switchOption">
                    <span class="fl-prefsEditor-switchOn-indicator">✔</span>
                    <span class="fl-prefsEditor-switchOn-label">ON</span>
                </span>
            </span>
            <span class="fl-prefsEditor-switchOff">
                <span class="fl-prefsEditor-switchOption">
                    <span class="fl-prefsEditor-switchOff-indicator">✔</span>
                    <span class="fl-prefsEditor-switchOff-label">OFF</span>
                </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-switchOption">
                    <span class="fl-prefsEditor-switchOn-indicator">✔</span>
                    <span class="fl-prefsEditor-switchOn-label">ON</span>
                </span>
            </span>
            <span class="fl-prefsEditor-switchOff">
                <span class="fl-prefsEditor-switchOption">
                    <span class="fl-prefsEditor-switchOff-indicator">✔</span>
                    <span class="fl-prefsEditor-switchOff-label">OFF</span>
                </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;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: Helvetica;
    padding: 0.2em;
}

input:focus + label .fl-prefsEditor-switch {
    outline: 2px solid #000000;
    outline-offset: 1px;
}

.fl-prefsEditor-switchOn,
.fl-prefsEditor-switchOff {
    border: solid 2px #000000;
    border-radius: 0.2rem;
    width: 4em;
}

.fl-prefsEditor-switchOption {
    /* display: inline-flex; */
    /* justify-content: flex-end; */
    /* align-items: center; */
}

.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: 0.8em;
}

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;
}

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

.fl-prefsEditor-switchOn-indicator,
.fl-prefsEditor-switchOff-indicator {
    padding: 0 0.2em;
}

.fl-prefsEditor-switchOn-label {

}

.fl-prefsEditor-switchOff-label {

}

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