JSFiddle - React, Tailwind, and code Playground

by damiantt

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/olance/jQuery-switchButton/master/jquery.switchButton.js"></script>
<script type="text/javascript">
function handleClickSkin(cbSkin) {
            console.log('elo');
            }
            </script>

<div class="slider demo" id="slider-2">
  <input name="cbSkin" type="checkbox" value="1" onchange="handleClickSkin(this)">
</div>

CSS

.slider.demo .switch-button-label {
  font-size: 40px;
}

.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

$("#slider-2.demo input").switchButton({
  on_label: 'wheeeat',
  off_label: 'DARK',
  width: 100,
  height: 40,
  button_width: 70
});

function handleClickSkin(cbSkin) {
            console.log('elo');
            }