JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

    <script>
// Custom compiled "jquery-ui.js"
( function( factory ) {
	if ( typeof define === "function" && define.amd ) {

		// AMD. Register as an anonymous module.
		define( [ "jquery", "./version" ], factory );
	} else {

		// Browser globals
		factory( jQuery );
	}
}( function( $ ) {

var widgetUuid = 0;
var widgetHasOwnProperty = Array.prototype.hasOwnProperty;
var widgetSlice = Array.prototype.slice;

$.cleanData = ( function( orig ) {
	return function( elems ) {
		var events, elem, i;
		for ( i = 0; ( elem = elems[ i ] ) != null; i++ ) {

			// Only trigger remove when necessary to save time
			events = $._data( elem, "events" );
			if ( events && events.remove ) {
				$( elem ).triggerHandler( "remove" );
			}
		}
		orig( elems );
	};
} )( $.cleanData );

$.widget = function( name, base, prototype ) {
	var existingConstructor, constructor, basePrototype;

	// ProxiedPrototype allows the provided prototype to remain unmodified
	// so that it can be used as a mixin for multiple widgets (#8876)
	var proxiedPrototype = {};

	var namespace = name.split( "." )[ 0 ];
	name = name.split( "." )[ 1 ];
	var fullName = namespace + "-" + name;

	if ( !prototype ) {
		prototype = base;
		base = $.Widget;
	}

	if ( $.isArray( prototype ) ) {
		prototype = $.extend.apply( null, [ {} ].concat( prototype ) );
	}

	// Create selector for plugin
	$.expr.pseudos[ fullName.toLowerCase() ] = function( elem ) {
		return !!$.data( elem, fullName );
	};

	$[ namespace ] = $[ namespace ] || {};
	existingConstructor = $[ namespace ][ name ];
	constructor = $[ namespace ][ name ] = function( options, element ) {

		// Allow instantiation without "new" keyword
		if ( !this._createWidget ) {
			return new constructor( options, element );
		}

		// Allow instantiation without initializing for simple inheritance
		// must use "new" keyword (the code above always passes args)
		if (...

JavaScript

(function () {
    let counter = 0;

    $.widget("Test.WidgetA", {
        _create: function () {
            this._myPrivates.count = ++counter;
        },
        _privates: {
            count: 0,
            common: "WidgetA",
            print: function () {
                this.element.append("<div>WidgetA#" + this._myPrivates.count + "</div>")
            },
        },
        print: function () {
            this._myPrivates.print();
        },
    });
})();

(function () {
    let counter = 0;

    $.widget("Test.WidgetB", $.Test.WidgetA, {
        _create: function () {
            this._myPrivates.count = ++counter;
            this._super();
        },
        _privates: {
            count: 0,
            print: function () {
                this.element.append("<div>WidgetB#" + this._myPrivates.count + "</div>")
            },
        },
        print: function () {
            this._super();
            this._myPrivates.print();
        },
    });
})();

$(document).ready(function () {
    $("<h1></h1>")
        .appendTo($("body"))
        .text("Hello World!");

    let widget1 = $("<div></div>")
        .appendTo($("body"))
        .WidgetA()
        .WidgetA("instance");

    let widget2 = $("<div></div>")
        .appendTo($("body"))
        .WidgetB()
        .WidgetB("instance");

    let widget3 = $("<div></div>")
        .appendTo($("body"))
        .WidgetA()
        .WidgetA("instance");

    let widget4 = $("<div></div>")
        .appendTo($("body"))
        .WidgetB()
        .WidgetB("instance");

    widget1.print();
    widget2.print();
    widget3.print();
    widget4.print();
});