JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/ui-darkness/jquery-ui.css" type="text/css" media="all" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
    </head>
    <style>
        body{
            text-align: center;
            font-size: 200%;
            background: #288db1;
        }
        a{
            color: #fff;
        }
        .what{
            font-size: 70%;
            padding: 1em;
            color: #ddd;
        }
    </style>
    <script>
        $(function(){
            $( "#check" )
                .change(function(){
                    alert("Button changed! Checked attr: "+$("#check").attr('checked'));
                })
                .button();
                
            $("#checkVal")
                .click(function(){
                    alert("Checked attr: "+$("#check").attr('checked'));
                });
        });
    </script>
    <body>
        <div class="what">
            An event is attached for the checkbox/button's change event... it shows the value of the 
            'checked' attribute. This event does not get fired and the input element in the DOM does not get updated if you do this: mousedown on the button and hold, drag on the button a little, then release on the button (do it slow or fast)... the styles get changed, but the event is not fired and the 'checked' attribute is not updated on the input element (also- this may be a Firefox only issue? IE and Chrome seem to be ok)
            <br>
            - An ORANGE button should always show true (checked)<br>
            - A GRAY button should always show false (not checked)
        </div>
        <div>
            <input type="checkbox" id="check" /><label...