JSFiddle - React, Tailwind, and code Playground

HTML

<div style="top:0px;width:100%;margin:auto;text-align:center;">
<div style="top:0px;width:80%;margin:auto;text-align:center;">
<a href="#da">da</a>
<a href="#db">db</a>


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

</div>
</div>

CSS

#da, #db {
	-moz-transform:scale(0.3);
	-o-transform:scale(0.3);
	-ms-transform:scale(0.3);
	transform:scale(0.3);
	-webkit-transform:scale(0.3);
	-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:0;
}

#da:target, #db:target {
	-moz-transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1);
	-webkit-transform:scale(1);
	z-index:100;
}

.DIVANa {
	width:30px;
	line-height:30px;
	position:absolute;
	background-color:green;
	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;
}
.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 {
	cursor:pointer;
	-webkit-transform:scale(2);
	-ms-transform:scale(2);
	-moz-transform:scale(2);
	-o-transform:scale(2);
	background-color:deepskyblue;
	z-index:100;
}
.DIVAX {
	width:30px;
	margin-bottom:3px;
	margin-right:3px;
	height:30px;
	float:left;
}
#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;
}
#scale:hover {
	cursor:pointer;
	background-color:orange;
}

JavaScript

for (var i=1;i<150;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("da").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("db").appendChild(y);
	}

window.location.hash="da";