JSFiddle - React, Tailwind, and code Playground

by cutsomeat

HTML

<div id="d1">this is test div 1</div>

JavaScript

(function($) {
    
    var methods = {
        bad: bad
    };
    
    $.fn.hl = function() {
        if (typeof arguments[0] === "string") {
            //execute string comand on mediaPlayer
            var property = arguments[1];
            //remove the command name from the arguments
            var args = Array.prototype.slice.call(arguments);
            args.splice(0, 1);

            methods[arguments[0]].apply(this, args);
        }
        else {
            //create mediaPlayer
            create.apply(this, arguments);
        }
        return this;
    };
    
    function create(options) {
        return $(this).addClass("ui-state-highlight").css({
            "padding": options.padding + "px",
            "font": options.font
        });
    };
    
    function bad() {
        $(this).removeClass().addClass("ui-state-error");
    };

    $("#d1").hl({
        padding: 20,
        font: "24px Arial"
    });
    
    $("<button>").button().text("Go bad!").click(function(e, ui) {
        $("#d1").hl("bad");
    }).appendTo("body");

}(jQuery));