JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<script src="http://olance.github.io/jQuery-switchButton/jquery.switchButton.js"></script>
 <div class="demo" id="basic">
        <input type="checkbox" value="1" checked>
      </div>

CSS

.switch-button-label {
    float: left;

    font-size: 10pt;
    cursor: pointer;
}

.switch-button-label.off {
    color: #adadad;
}

.switch-button-label.on {
    color: #0088CC;
}

.switch-button-background {
    float: left;
    position: relative;

    background: #ccc;
    border: 1px solid #aaa;

    margin: 1px 10px;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    cursor: pointer;
}

.switch-button-button {
    position: absolute;

    left: -1px;
    top : -1px;

    background: #FAFAFA;
    border: 1px solid #aaa;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

JavaScript

$(function(){
  //  $("#basic"). switchButton()

$("#basic").switchButton({
  on_label: 'yes',
  off_label: 'no'
});

})