JSFiddle - React, Tailwind, and code Playground

HTML

<div class="one">
    <div class="button-wrap">
        <div class="button-out">OFF</div>
        <div class="button-switch"></div>
    </div>
    <table  >
          <tr class = "field_34">
      <th class = "kn-label">
        <span>Home</span>
      </th>
      <td class = "kn-value">
        <span>On</span>
      </td>
</tr>

</table>

</div>

CSS

/* BUTTON 1 */
 .one .button-wrap {
    width: 120px;
    margin: 40px auto 0;
    cursor: pointer;
    height: 100%;
    background-color: #0f243e;
    border-radius: 40px;
    padding: 3px;
    color:#fff;
    transition:all 0.2s ease;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.one .button-out {
    position:absolute;
    transition:all 0.2s ease;
    padding-top:15px;
    font-size:0.8em;
    text-transform:uppercase;
    font-weight:bold;
    font-family:'Helvetica', sans-serif;
    margin-left:18px;
    color:#dd2222;
}

.one .button-switch {
    position:relative;
    left:0px;
    width: 64px;
    height: 44px;
    border:solid 13px;
    border-radius: 36px;
    transition:all 0.2s ease;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

JavaScript

s = '<div class="button-wrap">  <div class="button-out">On</div> <div class="button-switch"></div> </div>'

$('span:contains("On")').html(s);