JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<form>
    <label for="flip-checkbox-1">Flip toggle switch checkbox:</label>
    <input type="checkbox" data-role="flipswitch" name="flip-checkbox-1" id="flip-checkbox-1">
</form>

CSS

/*
* jQuery Mobile v1.4.5
* http://jquerymobile.com
*
* Copyright 2010, 2014 jQuery Foundation, Inc. and other contributors
* Released under the MIT license.
* http://jquery.org/license
*
*/

/* Some unsets */
 .ui-mobile, .ui-mobile body {
    height: 99.9%;
}
.ui-mobile fieldset, .ui-page {
    padding: 0;
    margin: 0;
}
.ui-mobile a img, .ui-mobile fieldset {
    border-width: 0;
}
/* Fixes for fieldset issues on IE10 and FF (see #6077) */
 .ui-mobile fieldset {
    min-width: 0;
}
@-moz-document url-prefix() {
    .ui-mobile fieldset {
        display: table-column;
        vertical-align: middle;
    }
}
/* Viewport */
 .ui-mobile-viewport {
    margin: 0;
    overflow-x: visible;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust:none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Issue #2066 */
 body.ui-mobile-viewport, div.ui-mobile-viewport {
    overflow-x: hidden;
}
/* "page" containers - full-screen views, one should always be in view post-pageload */
 .ui-mobile[data-role=page], .ui-mobile[data-role=dialog], .ui-page {
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    position: absolute;
    display: none;
    border: 0;
}
/* On ios4, setting focus on the page element causes flashing during transitions when there is an outline, so we turn off outlines */
 .ui-page {
    outline: none;
}
.ui-mobile .ui-page-active {
    display: block;
    overflow: visible;
    overflow-x: hidden;
}
@media screen and (orientation: portrait) {
    .ui-mobile .ui-page {
        min-height: 420px;
    }
}
@media screen and (orientation: landscape) {
    .ui-mobile .ui-page {
        min-height: 300px;
    }
}
/* Fouc */
 .ui-mobile-rendering > * {
    visibility: hidden;
}
/* Non-js content hiding */
 .ui-nojs {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}
/* Loading screen */
 .ui-loading .ui-loader {
    display: block;
}
.ui-loader {
    display:...

JavaScript

/*
 * jQuery Mobile v1.4.5
 * http://jquerymobile.com
 *
 * Copyright 2010, 2014 jQuery Foundation, Inc. and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 */

(function (root, doc, factory) {
    if (typeof define === "function" && define.amd) {
        // AMD. Register as an anonymous module.
        define(["jquery"], function ($) {
            factory($, root, doc);
            return $.mobile;
        });
    } else {
        // Browser globals
        factory(root.jQuery, root, doc);
    }
}(this, document, function (jQuery, window, document, undefined) {
    (function ($) {
        $.mobile = {};
    }(jQuery));

    (function ($, window, undefined) {
        var nsNormalizeDict = {},
        oldFind = $.find,
            rbrace = /(?:\{[\s\S]*\}|\[[\s\S]*\])$/,
            jqmDataRE = /:jqmData\(([^)]*)\)/g;

        $.extend($.mobile, {

            // Namespace used framework-wide for data-attrs. Default is no namespace

            ns: "",

            // Retrieve an attribute from an element and perform some massaging of the value

            getAttribute: function (element, key) {
                var data;

                element = element.jquery ? element[0] : element;

                if (element && element.getAttribute) {
                    data = element.getAttribute("data-" + $.mobile.ns + key);
                }

                // Copied from core's src/data.js:dataAttr()
                // Convert from a string to a proper data type
                try {
                    data = data === "true" ? true : data === "false" ? false : data === "null" ? null :
                    // Only convert to a number if it doesn't change the string
                    +
                    data + "" === data ? +data : rbrace.test(data) ? JSON.parse(data) : data;
                } catch (err) {}

                return data;
            },

            // Expose our cache for testing purposes.
           ...