JSFiddle - React, Tailwind, and code Playground

HTML

<div id="DIVA" style="width:636px;position:absolute;top:130px;left:100px;background-color:darkgray;-moz-transform:matrix(1,0,0,1,0,0);-webkit-transform:matrix(1,0,0,1,0,0);-ms-transform:matrix(1,0,0,1,0,0);-o-transform:matrix(1,0,0,1,0,0);transform:matrix(1,0,0,1,0,0);"></div>
		<div id="DIVB" style="width:636px;position:absolute;top:400px;left:250px;background-color:darkgray;-moz-transform:matrix(0.3,0,0,0.3,0,0);-webkit-transform:matrix(0.3,0,0,0.3,0,0);-ms-transform:matrix(0.3,0,0,0.3,0,0);-o-transform:matrix(0.3,0,0,0.3,0,0);transform:matrix(0.3,0,0,0.3,0,0);"></div>
<div id="test2" style="position:absolute;height:100px;width:75px;bottom:0px;background-color:yellow; right:0px;border:1px solid;text-align:center">SCALE</div>

CSS

.DIVAN {
	width:35px;
	line-height:30px;
	position:absolute;
	background-color:lightblue;
	font-size:15pt;
	text-align:center;
	font-family:Arial Unicode MS;
	-webkit-transition:all .1s linear;
	-moz-transition:all .1s linear;
	-o-transition:all .1s linear;
	transition:all .1s linear;
}
.DIVAN:hover {
	cursor:pointer;
	-webkit-transform:scale(2);
	-ms-transform:scale(2);
	-moz-transform:scale(2);
	-o-transform:scale(2);
	background-color:orange;
	z-index:100;
}
.DIVAX {
	width:35px;
	margin-bottom:3px;
	margin-right:3px;
	height:30px;
	float:left;
}

#DIVA {
	/*-webkit-transform:scale(1);*/
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	transition:all 0.3s linear;
}
#DIVB {
	/*-webkit-transform:scale(1);*/
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	transition:all 0.3s linear;
}

JavaScript

for (var i=1;i<150;i++) {
		var t=document.createElement("DIV");
		var y=document.createElement("DIV");
		y.className="DIVAX";
		t.className="DIVAN";
		t.innerHTML=i;
		y.appendChild(t);
		document.getElementById("DIVA").appendChild(y);
	}
	for (var i=1;i<150;i++) {
		var t=document.createElement("DIV");
		var y=document.createElement("DIV");
		y.className="DIVAX";
		t.className="DIVAN";
		t.innerHTML=i;
		y.appendChild(t);
		document.getElementById("DIVB").appendChild(y);
	}

document.getElementById("test2").onclick=function() {incDec(Q,"DIVA","DIVB");}

	var courbes = {
		sin:function (s) {return Math.sin(Math.PI*s/2)}
	}
	var Q = {
		timers:[null,null],
        iD:function (t) {return document.getElementById(t);}
    }
    
	function retrieveScale(q,what) {
		var elem=q.iD(what);
		if (elem.style.webkitTransform) {var sw=1;}
		else if (elem.style.MozTransform) {var sw=2;}
		else if (elem.style.OTransform) {var sw=3;}
		else if (elem.style.msTransform) {var sw=4;}
		else if (elem.style.transform) {var sw=5;}
		switch(sw) {
			case 1:
				if (parseFloat(elem.style.webkitTransform.substr(7,1))==0) {var sinit=parseFloat(elem.style.webkitTransform.substr(7,3));
				}
				else {var sinit=parseFloat(elem.style.webkitTransform.substr(7,1));}
				break;
			case 2:
				if (parseFloat(elem.style.MozTransform.substr(7,1))==0) {var sinit=parseFloat(elem.style.MozTransform.substr(7,3));
				}
				else {var sinit=parseFloat(elem.style.MozTransform.substr(7,1));}
				break;
			case 3:
				if (parseFloat(elem.style.OTransform.substr(7,1))==0) {var sinit=parseFloat(elem.style.OTransform.substr(7,3));
				}
				else {var sinit=parseFloat(elem.style.OTransform.substr(7,1));}
				break;
			case 4:
				if (parseFloat(elem.style.msTransform.substr(7,1))==0) {var sinit=parseFloat(elem.style.msTransform.substr(7,3));
				}
				else {var sinit=parseFloat(elem.style.msTransform.substr(7,1));}
				break;
			case 5:
				if (parseFloat(elem.style.transform.substr(7,1))==0) {var...