JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scale">Scale</div>


<div id="DIVA" class="DIVAsmall" style="position:absolute;left:20%;top:120px;width:636px;display:inline-table;margin-right:auto;margin-left:auto;"></div>
<div id="DIVB" class="DIVB" style="position:absolute;left:20%;top:120px;width:636px;display:inline-table;"></div>

CSS

#scale {
	margin-top:50px;
	background-color:snow;
	box-shadow:inset 0px 0px 3px gray;
	width:100px;
	margin-left:auto;
	margin-right:auto;
	-webkit-transition:all .1s linear;
	-moz-transition:all .1s linear;
	-o-transition:all .1s linear;
	transition:all .1s linear;
    text-align:center;
}
#scale:hover {
	cursor:pointer;
	background-color:orange;
}
.DIVAsmall, .DIVBsmall {
	-moz-transform:scale(0.2);
	-o-transform:scale(0.2);
	-ms-transform:scale(0.2);
	transform:scale(0.2);
	-webkit-transform:scale(0.2);
	
	-o-transition:all 0.4s ease-in;
	-moz-transition:all 0.4s ease-in;
    transition:all 0.4s ease-in;
	-webkit-transition:all 0.4s ease-in;
	/*left:180px;*/
	z-index:0;
}
.DIVA, .DIVB {
	-moz-transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1);
	-webkit-transform:scale(1);

	-o-transition:all 0.4s ease-in;
	-moz-transition:all 0.4s ease-in;
    transition:all 0.4s ease-in;
	-webkit-transition:all 0.4s ease-in;
	z-index:100;
}
.DIVANa {
	width:30px;
	line-height:30px;
	position:absolute;
	background-color:green;
    font-size:12pt;
	color:white;
    text-align:center;
	font-family:Arial Unicode MS;
	box-shadow:inset 0px 0px 2px black;
	-webkit-transition:all .1s linear;
	-moz-transition:all .1s linear;
	-o-transition:all .1s linear;
	transition:all .1s linear;
}
.DIVANb {
	width:30px;
	line-height:30px;
	position:absolute;
	background-color:gray;
	color:white;
	font-size:12pt;
	text-align:center;
	font-family:Arial Unicode MS;
	box-shadow:inset 0px 0px 2px black;
	-webkit-transition:all .1s linear;
	-moz-transition:all .1s linear;
	-o-transition:all .1s linear;
	transition:all .1s linear;
}

.DIVANa:hover {
	cursor:pointer;
	-webkit-transform:scale(2);
	-ms-transform:scale(2);
	-moz-transform:scale(2);
	-o-transform:scale(2);
	background-color:darkred;
	z-index:100;
}
.DIVANb:hover...

JavaScript

for (var i=1;i<250;i++) {
		var t=document.createElement("DIV");
		var y=document.createElement("DIV");
		y.className="DIVAX";
		t.className="DIVANa";
		t.innerHTML=i;
		t.onclick=function() {alert(this.innerHTML)}
		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="DIVANb";
		t.innerHTML=i;
		t.onclick=function() {alert(this.innerHTML)}
		y.appendChild(t);
		document.getElementById("DIVB").appendChild(y);
	}
	
	document.getElementById("scale").onclick=function() {
		if (document.getElementById("DIVA").className=="DIVAsmall") {
			document.getElementById("DIVA").className="DIVA";
			document.getElementById("DIVB").className="DIVBsmall";
		}
		else {
			document.getElementById("DIVA").className="DIVAsmall";
			document.getElementById("DIVB").className="DIVB";
		}
	}