JSFiddle - React, Tailwind, and code Playground

HTML

<label class="topcoat-switch">
                          <input id="testcheck" type="checkbox"  name="testd" class="topcoat-switch__input">
                          <div class="topcoat-switch__toggle"></div>
                        </label>
                        <div id="status">switch status</div>

CSS

.topcoat-switch {
    position: relative;
    display: inline-block;  
    padding: 0 1.25rem;
    border-radius: 6px;
    border: 1px solid #a5a8a8;
    overflow: hidden;
    width: 6rem;
  
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.topcoat-switch__input {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: 0;
    padding: 0;
    border: 0;
  
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0.1)";
    filter: alpha(opacity=0.1);
    opacity: 0.001;
}

.topcoat-switch__toggle,.button {
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    background: transparent;
    border: none;
    cursor: default;
  
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topcoat-switch__toggle {
    line-height: 3rem;
    height: 3rem;
    width: 2rem;
    border-radius: 5px;
    color: #454545;
    text-shadow: 0 1px #fff;
    background-color: #e5e9e8;  
    border: 1px solid #a5a8a8;
    margin-left: -1.3rem;
  margin-bottom:-1px;
  margin-top:-1px;

  -webkit-box-shadow: inset 0 1px #fff;
    box-shadow: inset 0 1px #fff;
  
    -webkit-transition: margin-left 0.05s ease-in-out;
    -moz-transition: margin-left 0.05s ease-in-out;
    -o-transition: margin-left 0.05s ease-in-out;
    -ms-transition: margin-left 0.05s ease-in-out;
    transition: margin-left 0.05s ease-in-out;
}

.topcoat-switch__input:checked +...

JavaScript

///this doesn't work when using prop() instead of attr() ?  

            $('#testcheck').change(function(){
                var el=$(this);
                el.attr("checked", !el.attr("checked"));
                 
                $('#status').html(el.attr("checked")?'callback true':'callback false');
             });