JSFiddle - React, Tailwind, and code Playground

HTML

<input id="perm_active" type="checkbox" value="yes" />
<input id="temp_opposite" type="checkbox" value="yes" />
<label for="perm_active" class="btn btn-default btn-primary-toggle"><span></span></label>
<label for="temp_opposite" class="btn btn-default btn-temporary-toggle"><span></span></label>

CSS

input {
    display: none;
}

label {
    display: block;
    float: left;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #ddd;
}

/* Checked + empty */
input:checked + input + label span:before {
    content: "Yes";
    color: #3c763d;
}

/* Empty + checked */
input:checked + label + label span:before {
    content: "Yes";
    color: #3c763d;
}

/* Checked + checked */
input:checked + input:checked + label + label span:before {
    content: "No";
    color: #a94442;
}