JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css">
 <br><br>
  
<label for="xAxisToggleBtn"></label>
                                        <input type="checkbox" id="xAxisToggleBtn"/>

CSS

.on {
    background: green!important;
    color: white!important;    
}

.off {

}

JavaScript

$(function() {
    $("#xAxisToggleBtn").attr('checked', true)
      .addClass('on').button({'label': 'Turn Off'})
      .button('widget')
      .addClass('off');        
  
      $('#xAxisToggleBtn').on('click', function(){                
                if($(this).is(':checked')){
                    $(this).button('option', 'label', 'Turn Off');
                } else {
                    $(this).button('option', 'label', 'Turn On');
                }
                $(this).button('widget').toggleClass('on off');
        });
        
});