JSFiddle - React, Tailwind, and code Playground

Bootstrap 3 Jquery Yakabox

by DugSohn

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/custom/css/cache/6fdc3a856a26e706a3edad566422a903.css?yakabox-vne-5.21.4-1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sidr/2.2.1/jquery.sidr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sidr/2.2.1/stylesheets/jquery.sidr.dark.min.css">
<body class="ui-app ui-global-nav ui-app-inverse ui-app-dash  ui-workflow-manager" ui-app-id="39" role="application">

  <footer>
	
	<nav class="navbar navbar-inverse ui-dashboard-toolbar"><div class="container-fluid"><div class="navbar-header"><button type="button" class="btn btn-link btn-sm navbar-toggle collapsed hidden-xs" data-toggle="collapse" data-target="#dashboard-admin-toolbar" aria-expanded="false"><span class="sr-only">Toggle navigation</span><!-- react-text: 129 -->MENU<!-- /react-text --></button><div class="navbar-brand">Dashboard Tools</div></div><div class="collapse navbar-collapse" id="dashboard-admin-toolbar"><ul class="nav navbar-nav "><li><label for="showLayout" class="navbar-text"><input type="checkbox" name="showLayout" value="on"><!-- react-text: 136 -->&nbsp;<!-- /react-text --><!-- react-text: 137 -->Layout<!-- /react-text --></label><span><button class="btn btn-xs btn-link navbar-btn" name="resetWidth" disabled="" title="Remove Custom Widths" aria-label="Remove Custom Widths" type="button"><span class="fa-stack fa-lg"><i class="fa fa-ban fa-stack-2x text-muted"></i><i class="fa fa-arrows-h fa-90 fa-stack-1x"></i></span></button></span><span><button class="btn btn-xs btn-link navbar-btn"...

SCSS

/* start scss file _ui--yakabox-app-radio-slider */

/* height */
$h: 3rem;
/* width */
$w: $h * 2.6;
/* toggle dimensions */
$tw: $h * 1.3;
/* font size */
$fs: 1rem;
/* toggle's border thickness */
$bt: 0.045rem;
/* toggle box shadow */
$bs: $bt * 2;
/* labels animation time */
$ta: 6s;
/* label text color */
$text-color: white;

/* colors: si, ?, no*/
$colors: #008000, gray;

	@mixin borderColor($i) {
  border: $bt solid nth($colors, $i);
  background: nth($colors, $i);
  box-shadow: 0 0 $bs $bs/2 nth($colors, $i) inset,
              0 0 $bs $bs/2 nth($colors, $i);
}



.ui-radio-slide-wrapper {
  width: $w;
  height: $h;
  position: relative;
  margin: 10px 10px 0 ;
  border-radius: $h/2;
  background: lighten(gray, 10%);

	
 
  & .toggle {
    width: $tw  ;
    height: $tw;
    position: absolute;
    left: $w / 2 ;
    top: -($tw - $h) / 2;
    border-radius: 50%;
    box-sizing: border-box;
    @include borderColor(2);
    
    transition:
        all .3s cubic-bezier(
          0.175, 0.885, 0.320, 1.275
        );
  }

  & label {
    cursor: pointer;
    width: $h;
    height: $h;
    position: absolute;
    margin: 0;
    padding: 0;
    z-index: 1;
    display: inline-block;  
    text-align: center;
    line-height: $h;
    text-transform: uppercase;
    font-size: $fs;
    color: $text-color;
  }
  
  & input {
    position: absolute;
    left: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
  }
}

#live_radio:checked {
  
  ~ .toggle {
    @include borderColor(1);
    left: -($tw - $h) / 2;
  }
}

#pause_radio {
  left: 100% * 1 / 2;
}

#pause-lbl {
  left: 53.5%;
}


/* end scss file _ui--yakabox-app-radio-slider */




.ui-start-button, .ui-end-button {
	    @include borderColor(1);
			
					text-align: center;
					text-transform: uppercase;
					font-family: 'Lato', sans-serif;
					font-size: $fs;
					font-weight: bold;
					color: $text-color;
					margin-top: 2rem;
					width: 180px;
}

.ui-end-button {
	    @include borderColor(1);
			 ...