JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://talkslab.github.io/metro-bootstrap/css/metro-bootstrap.css">
<link rel="stylesheet" href="raw.github.com/nostalgiaz/bootstrap-switch/master/static/stylesheets/bootstrap-switch.css">
<script src="https://raw.github.com/nostalgiaz/bootstrap-switch/master/static/js/bootstrap-switch.min.js"></script>
    <!--BEGIN TABS-->
                <div class="tabbable tabbable-custom tabs-left"  style="position: absolute; z-index: 100; right: 60px;">
                    <!-- Only required for left/right tabs -->
                    <ul class="nav nav-tabs tabs-left">
                        <li class="active"><a href="#tab1" data-toggle="tab">Section</a></li>
                        <li><a href="#tab2" data-toggle="tab">Section</a></li>
                        <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
                    </ul>
                    <div class="tab-content">
                        
                            <div class="switch switch-mini" data-on-label="<i class='icon-sun icon-white'></i>" data-off-label="<i class='icon-sun muted'></i>">
                                <input id="swWeather" type="checkbox" class="toggle" onclick="toggleWeather()" />
                            </div>
                            <br />
                            <div class="switch switch-mini" data-on-label="<i class='icon-cloud icon-white'></i>" data-off-label="<i class='icon-cloud muted'></i>">
                                <input id="swCloud" type="checkbox" class="toggle" onclick="toggleWeather()" />
                            </div>
                            <br />
                            <a class="btn blue mini" style="background-color: #005fcc !important;">&nbsp;<i class="icon-screenshot icon-white"></i>&nbsp;Focus&nbsp;</a>
                        
                       
     ...

CSS

/* ============================================================
 * bootstrapSwitch v1.5 by Larentis Mattia @SpiritualGuru
 * http://www.larentis.eu/
 *
 * Enhanced for radiobuttons by Stein, Peter @BdMdesigN
 * http://www.bdmdesign.org/
 *
 * Restyled by KeenThemes for Metronic Theme
 * 
 * Project site:
 * http://www.larentis.eu/switch/
 * ============================================================
 * Licensed under the Apache License, Version 2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 * ============================================================ */
.has-switch {
  display: inline-block;
  cursor: pointer;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid;
  border-color: #e3e3e3;
  position: relative;
  text-align: left;
  overflow: hidden;
  line-height: 8px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  min-width: 100px;
}
.has-switch.switch-mini {
  min-width: 72px;
}
.has-switch.switch-small {
  min-width: 80px;
}
.has-switch.switch-large {
  min-width: 120px;
}
.has-switch.deactivate {
  opacity: 0.5;
  filter: alpha(opacity=50);
  cursor: default !important;
}
.has-switch.deactivate label,
.has-switch.deactivate span {
  cursor: default !important;
}
.has-switch > div {
  display: inline-block;
  width: 150%;
  position: relative;
  top: 0;
}
.has-switch > div.switch-animate {
  -webkit-transition: left 0.5s;
  -moz-transition: left 0.5s;
  -o-transition: left 0.5s;
  transition: left 0.5s;
}
.has-switch > div.switch-off {
  left: -50%;
}
.has-switch > div.switch-on {
  left: 0%;
}
.has-switch input[type=radio],
.has-switch input[type=checkbox] {
  display: none;
}
.has-switch span,
.has-switch label {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  display: inline-block;
  height: 100%;
  padding-bottom: 4px;
  padding-top: 4px;
 ...

JavaScript

/* ============================================================
 * bootstrapSwitch v1.5 by Larentis Mattia @SpiritualGuru
 * http://www.larentis.eu/
 * 
 * Enhanced for radiobuttons by Stein, Peter @BdMdesigN
 * http://www.bdmdesign.org/
 *
 * Project site:
 * http://www.larentis.eu/switch/
 * ============================================================
 * Licensed under the Apache License, Version 2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 * ============================================================ */

!function ($) {
  "use strict";

  $.fn['bootstrapSwitch'] = function (method) {
    var methods = {
      init: function () {
        return this.each(function () {
            var $element = $(this)
              , $div
              , $switchLeft
              , $switchRight
              , $label
              , $form = $element.closest('form')
              , myClasses = ""
              , classes = $element.attr('class')
              , color
              , moving
              , onLabel = "ON"
              , offLabel = "OFF"
              , icon = false;

            $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) {
              if (classes.indexOf(el) >= 0)
                myClasses = el;
            });

            $element.addClass('has-switch');

            if ($element.data('on') !== undefined)
              color = "switch-" + $element.data('on');

            if ($element.data('on-label') !== undefined)
              onLabel = $element.data('on-label');

            if ($element.data('off-label') !== undefined)
              offLabel = $element.data('off-label');

            if ($element.data('icon') !== undefined)
              icon = $element.data('icon');

            $switchLeft = $('<span>')
              .addClass("switch-left")
              .addClass(myClasses)
              .addClass(color)
              .html(onLabel);

            color = '';
            if ($element.data('off') !== undefined)
    ...