JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<button id="zoomin"> Zoom In</button>

<div id="displayStatus"></div>
<br/><br/>

<div id="container">
<div class="zoomable">First Div
</div>
<div class="zoomable" style="left:105px">Second Div
</div>
</div>
<br/><br/>

CSS

.zoomable{
      background-color:lightblue;       
      width:100px;
      height:100px;
      position:absolute;
      transform-origin: top left; 
      border:1px solid red;
    }
    #container{
    width:500px;
    height:500px;
    border:1px solid red;
    position:relative;
    overflow:auto;
    }

JavaScript

var zoomScale = 1;
$(document).ready(function(){
	 $("#zoomin").click(function(){
    if(zoomScale >=4 ) return;
    zoomScale = zoomScale +1;
    dispStatus();
    applyZoomIn();
  });

  function applyZoomIn(){
    $(".zoomable").each(function(index){
      var left = $(this).position().left;
      var top = $(this).position().top;
      var newLeft = left*zoomScale +"px";
      var newTop = top*zoomScale +"px";
      // Calculated new 
      //$(this).css( { transform: "scale("+zoomScale+","+zoomScale+"),translate("+newLeft+","+newTop+")" } )
      $(this).css('transform',' scale('+zoomScale+','+zoomScale+')')
    });
  }

 
  function dispStatus(){
   $("#displayStatus").text("Current Zoom Scale : "+zoomScale);
  }

  dispStatus();

});