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">
    <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">

</head>
<body>
    <a href="https://github.com/nostalgiaz/bootstrap-switch">
        <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub">
    </a>

    <div class="container">
        <div class="row-fluid">
            <div class="span8 offset2">
                <h1>Bootstrap switch</h1>
                <h4>
                    by
                    <a href="http://larentis.eu" target="_blank">Mattia Larentis</a> (<a href="https://twitter.com/spiritualguru">@SpiritualGuru</a>)
                    and
                    <a href="http://www.bdmdesign.org/" target="_blank">Peter Stein</a>
                </h4>
                <br>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span8 offset2" style="text-align: center;">
                <iframe...

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;
        }

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
       ...