JSFiddle - React, Tailwind, and code Playground

by CodeRenaissance

HTML

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>
</head>
<body>
    <button data-bind="click:toggle"></button>
    <div data-bind="fadeOn:display(), event:{mousemove:show}">Test</div>
</body>
    <script type="text/javascript">

        ko.bindingHandlers['fadeOn'] = {
            init: function (element, valueAccessor) {
                var value = ko.utils.unwrapObservable(valueAccessor());
                if (value) {
                    $(element).show();
                }
                else {
                    $(element).hide();
                }
            },
            update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
                var accessor = valueAccessor(),
                    value = ko.utils.unwrapObservable(accessor);
                this.lastValue = this.lastValue || false;

                if (value) {
                    clearTimeout(this.timeout);
                    if (value !== this.lastValue) {
                        $(element).stop(true, true).fadeIn(300);
                    }
                    this.timeout = setTimeout(function () {
                        //$(element).stop(true, true).fadeOut(300);
                        bindingContext.$data.display(false);
                    }, 1000);
                }
                else {
                    if (value !== this.lastValue) {
                        $(element).stop(true, true).fadeOut(300);
                    }
                }


                this.lastValue = value || false;
            }
        }

        var viewModel = {
            display: ko.observable(false),
            show: function () {
                viewModel.display(true);
            },
            toggle: function ()...