JSFiddle - React, Tailwind, and code Playground

by mikeys4u

HTML

<div id="holder">
<span id="on" class="unclicked">On</span><span id="off" class="clicked">Off</span>
</div>

CSS

a{text-decoration:none;}
body{text-align:center;background-color:#E0E1DF;font-size:20px;color:#5a5a5a;font-weight:normal;font-family:arial;width:99%;}
 
p{display:block;width:400px;margin:0 auto;text-align:left;}
 
/* from main */
 
#holder{
position: relative;
display:table;
width:160px;
height:26px;
        line-height: 26px;
border-radius: 5px;
margin:50px auto;
cursor:pointer;
overflow: hidden;
}
 
#on,
#off{
display:table-cell;
font-size: 20px;
font-weight: bold;
}
 
.unclicked{
color: #000;
background:white;
}
.clicked{
color: #fff;
background: #8BC53F;
}

JavaScript

$('#on, #off').click(function(){
     
var other = $(this).siblings().attr('id');
 
if ($(this).attr('class') == 'unclicked') {
$(this).removeClass('unclicked').addClass('clicked');
$('#' + other).removeClass('clicked').addClass('unclicked');
} else {
$(this).removeClass('clicked').addClass('unclicked');
$('#' + other).removeClass('unclicked').addClass('clicked');
}
 
var data = $(this).attr('id');
 
$.ajax({
url: 'process.php',
type: 'GET',
data: {'value': data},
success: function(resp) {
console.log(resp);
}
});
});