JSFiddle - React, Tailwind, and code Playground

by Rajeswaritest

HTML

<div style="width: 100%;">
  <input type="text" tabindex="0" value="hello"/>
<div>
<div class="ui-flipswitch ui-shadow-inset ui-bar-c crm-jqm-flipswitch-wrapper ui-corner-all"><a id="chkPref" href="javascript:;" class="ui-flipswitch-on ui-btn ui-shadow ui-btn-inherit" role="switch" aria-checked="false" aria-label="No" aria-disabled="false" onclick="javascript:changeCheckbox()" onKeyPress="javascript:changeCheckbox()">Yes</a><span class="ui-flipswitch-off">No</span><input type="checkbox" data-role="flipswitch" aria-hidden="true" class="ui-flipswitch-input" tabindex="-1">
</div>

</div>
<div style="width: 100%;">
  <input type="text" tabindex="0" value="hello"/>
<div>

CSS

.ui-bar-c.crm-jqm-flipswitch-wrapper.ui-flipswitch-active 
{
  					background-color: #41A053 !important;				
}	
.ui-bar-c.crm-jqm-flipswitch-wrapper .ui-flipswitch-off 
{					
    font-family: 'SegoeUI', 'Segoe UI' !important;					
    color:  #000000 !important;
    font-size:   13px !important;
 }	
 .ui-bar-c.crm-jqm-flipswitch-wrapper .ui-btn.ui-flipswitch-on 
 {			
    font-family: 'SegoeUI', 'Segoe UI' !important;					
    color:  #000000 !important;		
    font-size:   13px !important;				
 }
 /**
 * @license Copyright (c) Microsoft Corporation. All rights reserved.
 */

 /* Light Theme - Disabled (Inactive)*/
.ui-bar-c.crm-jqm-flipswitch-wrapper.mobile-flipswitch-disabled {
	-ms-opacity: 1.0;
	opacity: 1.0;
}

.ui-bar-c.crm-jqm-flipswitch-wrapper.mobile-flipswitch-disabled.crm-jqm-flipswitch-wrapper-disabled {

}

/* Light Theme - Knob and On Text*/
.ui-bar-c.crm-jqm-flipswitch-wrapper .ui-btn.ui-flipswitch-on {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	background-color: #000;
	border-color: #000;
	color: #000;
	padding: 0;
	-ms-border-radius: 5px;
	border-radius: 5px;
}

/* Light Theme - Pressed (Inactive) */
.ui-bar-c.crm-jqm-flipswitch-wrapper:active {
	background-color: #9E9E9E !important; /* BaseMedium */
	border-color: #9E9E9E !important; /* BaseMedium */
}
.ui-bar-c.crm-jqm-flipswitch-wrapper:active .ui-btn.ui-flipswitch-on {
	background-color: #FFF !important; /* ChromeWhite */
}

/* Light Theme - Pressed (Active) */
.ui-bar-c.crm-jqm-flipswitch-wrapper.ui-flipswitch-active:active {
	background-color: #9E9E9E !important; /* BaseMedium */
}

/* Light Theme - Off Flipswitch Text */
.ui-bar-c.crm-jqm-flipswitch-wrapper .ui-flipswitch-off {
	color: #000; /* BaseHigh */
	font-size: medium;
	font-weight: normal;
}

/* Light Theme - Off Flipswitch */
.ui-bar-c.crm-jqm-flipswitch-wrapper {
	border-color: #333; /* BaseMediumHigh */
	background-color: #FFF; /* ChromeWhite */
	-webkit-box-sizing:...

JavaScript

function changeCheckbox(event) {
    let item = document.getElementById('chkPref');
    switch(item.getAttribute('aria-checked')) {
        case "true":
            item.setAttribute('aria-checked', "false");
            item.setAttribute('aria-label', "No");
            item.setAttribute('class', "ui-flipswitch ui-shadow-inset ui-bar-c crm-jqm-flipswitch-wrapper ui-corner-all");
            
             document.getElementById('chkPrefSpan').innerText ="this is false";
            break;
        case "false":
            item.setAttribute('aria-checked', "true");
            item.setAttribute('aria-label', "Yes");
            item.setAttribute('class', "ui-flipswitch ui-shadow-inset ui-bar-c crm-jqm-flipswitch-wrapper ui-corner-all ui-flipswitch-active");
            
             document.getElementById('chkPrefSpan').innerText ="this is true";
            break;
    }
}