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>
    <!-- ko foreach:test -->
    <button data-bind="click:toggle"></button>
    <span data-bind="fadeOn:display(), text:display, event:{mousemove:show}"></span><br />
    <!-- /ko -->
</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);
                if (value) {
                    clearTimeout(this.timeout);
                    $(element).stop(true, true).fadeIn(600);
                    bindingContext.$data.display(false);
                    this.timeout = setTimeout(function () {
                        $(element).stop(true, true).fadeOut(500);
                    }, 1000);
                }
            }
        }

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