JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<script type="application/javascript">
	'use strict';
	
	Node.prototype.a = function (tag) {
		return this.appendChild(tag);
	}
	
	Document.prototype.c = function (tag) {
		return this.createElement(tag);
	}
	
	
	Node.prototype.ca = function (tag, id) {
		var newElement = document.createElement(tag);
		newElement.setAttribute("id", id);
		this.appendChild(newElement);
		return newElement;
	}
	
	function tNode(textArg) {
			return document.createTextNode(textArg);
	}
	
	function start() {
		var bodyVar = document.getElementsByTagName("body")[0];
		
		bodyVar.ca("table", "table1");
		var tableVar = document.getElementById("table1");
		for (var i = 1; i <= 6; i++) {
			tableVar.ca("tr", "tr" + i);
			for (var j = 1;  j <= 2; j++) {
				document.getElementById("tr" + i).ca("td", "td" + ((i - 1) * 2 + j));
			}
		}
	}
	
	function coordgen(ev) {
		ev = ev || window.event;
		var cell;
		var rowParams = ["client", "offset", "Movement", "page", "screen"];
		var colParams = ["X", "Y"];
		for (var i = 1; i <= 5; i++) {
			for (var j = 1; j <= 2; j++) {
				cell = document.getElementById("td" + ((i - 1) * 2 + j));
				if (cell.lastChild != null) cell.removeChild(cell.lastChild);
				cell.a(tNode(rowParams[i - 1] + colParams[j - 1] + ": " + ev[rowParams[i - 1] + colParams[j - 1]]));
			}
		}
	}
	
	function whichelem(ev) {
			
		ev = ev || window.event;
			
		if (document.getElementById("td11").lastChild != null)
			document.getElementById("td11").removeChild(document.getElementById("td11").lastChild);
		document.getElementById("td11").a(tNode("relatedTarget"));
		if (document.getElementById("td12").lastChild != null)
			document.getElementById("td12").removeChild(document.getElementById("td12").lastChild);
		document.getElementById("td12").a(tNode(ev.relatedTarget.nodeName));
	}
</script>
</head>
<body onload='start()' onmousemove='coordgen(event)' onmouseout='whichelem(event)'>
</body>
</html>