JSFiddle - React, Tailwind, and code Playground

by rodrigonery

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://www.bootstrap-switch.org/static/js/bootstrap-switch.js"></script>
<link rel="stylesheet" href="http://bdmdesign.github.io/bootstrap-switch/static/stylesheets/flat-ui-fonts.css">
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <title>Bootstrap switch - by Mattia Larentis and Peter Stein</title>
    <meta name="description" content="Switches for radio buttons and checkboxes">
    <meta name="author" content="Mattia Larentis">
    <meta name="subauthor" content="Peter Stein">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;" />

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
    <link rel="stylesheet" href="../static/stylesheets/bootstrap-switch.css" />
    <link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css" />
    <link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/docs.css" />
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
    <link rel="stylesheet" href="http://bdmdesign.github.io/bootstrap-switch/static/stylesheets/flat-ui-fonts.css">

    <style type="text/css">
        body {
            padding-top: 60px;
            padding-bottom: 40px;
          }
        .span4, h1, h4 {
            text-align: center;
        }

        h1 {
            font-size: 4em;
        }

        h4 {
            font-weight: 200;
        }

        h1 {
            margin-bottom: 20px;
        }

        h3 {
            margin-top: 20px;
        }
    </style>

    <script>
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-43092768-1']);
       ...

JavaScript

$(document).ready(function() {
        window.prettyPrint && prettyPrint();
        $('#mySwitch').on('switch-change', function (e, data) {
            var $el = $(data.el)
                , value = data.value;
            console.log(e, $el, value);
        });

        // DIMENSION
        $('#btn-size-regular-switch').on('click', function () {
            $('#dimension-switch').bootstrapSwitch('setSizeClass', '');
        });
        $('#btn-size-mini-switch').on('click', function () {
            $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-mini');
        });
        $('#btn-size-small-switch').on('click', function () {
            $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small');
        });
        $('#btn-size-large-switch').on('click', function () {
            $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');
        });

        // STATE
        $('#toggle-state-switch-button').on('click', function () {
            $('#toggle-state-switch').bootstrapSwitch('toggleState');
        });
        $('#toggle-state-switch-button-on').on('click', function () {
            $('#toggle-state-switch').bootstrapSwitch('setState', true);
        });
        $('#toggle-state-switch-button-off').on('click', function () {
            $('#toggle-state-switch').bootstrapSwitch('setState', false);
        });
        $('#toggle-state-switch-button-status').on('click', function () {
            alert($('#toggle-state-switch').bootstrapSwitch('status'));
        });

        // DESTROY
        $('#btn-destroy-switch').on('click', function () {
            $('#destroy-switch').bootstrapSwitch('destroy');
            $(this).remove();
        });
        // CREATE
        $('#btn-create').on('click', function () {
            $('#create-switch').wrap('<div class="make-switch" />').parent().bootstrapSwitch();
            $(this).remove()
        });

        // ACTIVATION
       ...