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);
	}


var transformProperty = (function() {
    for (var i=0; i<arguments.length; i++) {
       var tStyle = arguments[i]+'Transform';
       if(document.body.style[tStyle])
            return tStyle;
    }
    return 'transform';
})('webkit', 'Moz', 'O', 'ms');

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 (parseFloat(elem.style[tStyle].substr(7,1))==0) {var sinit=parseFloat(elem.style.webkitTransform.substr(7,3));
				}
				else {var sinit=parseFloat(elem.style.webkitTransform.substr(7,1));}
		return [sinit,sw];
	}

	function incDec(q,what,What) {
		var sinitA=retrieveScale(q,what)[0];
		var s=retrieveScale(q,What);
		var sinitB=s[0];
		var sw=s[1];
		if (sinitA<1) {
			change_scale(q,what,10,1,0,sw,sinitA);
			change_scale(q,What,10,0.2,1,sw,sinitB);
		}
		else {
			change_scale(q,what,10,0.2,0,sw,sinitA);
			change_scale(q,What,10,1,1,sw,sinitB);
		}
	}

	function change_scale(q,what,idur,sfinal,o,sw,sinit) {
		var t0=new Date()*1;
		var elem=q.iD(what);
		var howmuch=sfinal-sinit;
		var dlta=0;
		if (!q.timers[o]) {
			q.timers[o]=setInterval(
				function () {
					var tx=new Date()*1-t0;
					if (tx<idur) {
						var...