JSFiddle - React, Tailwind, and code Playground

HTML

<body>
 </body>

CSS

body { margin: 0; }
			canvas { width: 100%; height: 100% }
			p {cursor:inherit}
			span {			
				position: absolute;
				top: 50%;
    			left: 50%;
				transform: translateX(-50%) translateY(-50%);
			}
			div {
				line-height: 100px;
				text-align: center;
			}

JavaScript

var log = console.log.bind(console);

MenuButton.prototype = {
    constructor: MenuButton,
    getElement:function ()  {
        return this.element;
    },
	getTitle:function() {
		return this.title;	
	},
	setPosition:function(x, y) {
		log("POSITION", x, y, this);
		if(!x) x = 0;
		if(!y) y = 0;
		this.x = x; this.y = y;
		this.element.css("left", x);
		this.element.css("top", y);
	},
	updatePosition:function(){
		this.element.css("left", this.x);
		this.element.css("top", this.y);
	},
	showChildren:function(show){
		if(show!==false) show = true;
		for(i = 0; i < this.childn.length; i++){
			if(show) this.childn[i].element.show();
			else this.childn[i].element.hide();	
		}
	}
}

$( document ).ready(function() { 
	//x = loadXml("menu.xml").documentElement;
    x = getX().documentElement;
	b = new MenuButton(null,"x","X",x, 100,10);
	b.updatePosition();
	$("body").append(b.getElement());
    
	log("W0", b.element.get(0).style.width);
	log("W1", b.element.width());
	log("W2", b.element[0].scrollWidth);
	log("W4", b.element[0].clientWidth);
	log("W5", b.element[0].getBoundingClientRect());
	log("W5", b.element[0].getClientRects());
	setTimeout(function(){log("W3", b.element.get(0).offsetWidth);}, 3000);
});



function MenuButton(parent, title, info, node, x, y, w, h, orient, base){
	if(!x) x = 0; if(!y) y = 0;
	if(!w) w = 100; if(!h) h = 50;
	if(orient==undefined) orient = 1; //horizontal orentation
	if(base !== false) base = true;
	this.x = x; this.y = y;
	this.w = w; this.h = h;
	
	this.title = title;
	this.info = info;
	this.n = node; //xml node
	this.o = orient;
	this.parent = parent;
	this.element = $("<div id= \""+title +"\"></div>");
	
	
	this.tween = null;
	
	this.childn = [];//child buttons
	
	if(!this.n) return;
	var n = this.n;
	var cho = orient;
	if(base) cho = +!cho;
	log("L", n.nodeName, n.children.length, orient, base, cho);
	var pos = [];
	var m = (parent && parent.o == orient) ? 1 : 0;
	this.element.css("position", "absolute");
	log("Ps",...