JSFiddle - React, Tailwind, and code Playground

by Abid Shaik

HTML

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="WidgetDemo"></div>
<div id="pgbar"></div>

CSS

#WidgetDemo{
    background-color:#99cc33;
    width:400px;
    height:400px;
}

JavaScript

/*Simple Widget Demo*/
$.widget("ui.mywidget", $.ui.mouse, 
         {
    _create:function(){
        this.button_ = $("<button>"); 
        this.button_.text("Test Button"); 
        $(this.button_).appendTo(this.element); 
    }, 
    resize: function(dim){
        var currentWidth = $(this.element).width();
        var currentHeight = $(this.element).height(); 
    $(this.element).width(currentWidth + dim); 
        $(this.element).height(currentHeight + dim); 
    }
    
}
); 

$( "#pgbar" ).progressbar({value:70});

$("#WidgetDemo").mywidget(); 
$("#WidgetDemo").mywidget("resize", 20);