JSFiddle - React, Tailwind, and code Playground

by Marite Ferrero

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 class="kn-input kn-input-short_text" id="kn-input-field_95" <label for="field_95" class="knack-input-label"> <span class="kn-input-label">Cash</span>

            </label>
            <div class="input">
                <input id="field_95" type="text" value="On">
            </div>
    </table>
    </div>
    
     
        <div class="kn-input kn-input-short_text" id="kn-input-field_95" <label for="field_97" class="knack-input-label"> <span class="kn-input-label">Internet</span>

            </label>
            <div class="input">
                <input id="field_97" type="text" value="On">
            </div>
  
    </div>

CSS

/* BUTTON 1 */
 .one .button-wrap {
    width: 120px;
    margin: 4px 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

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



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

//I would like to replace the On value after Cash label and //Internet label to the sOn css image