JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <body>
    <div id="content">&nbsp;</div>
    <div id="zoom-in">+</div>
    <div id="zoom-out">-</div>
  </body>
</html>

CSS

div#content{
  width:100px;
  height:100px;
  border: red solid 2px;
}
div[id^="zoom"]{
  border: blue solid 2px;
  background-color:#EEE;
  width:20px;
}

JavaScript

function zoomIn(evt){
  var node = evt.target.parentNode.children[0],
      nodeWidth = node.clientWidth,
      nodeHeight = node.clientHeight;
  node.style.width = (nodeWidth * 1.1)+"px";
  node.style.height = (nodeHeight * 1.1)+"px";
}
function zoomOut(evt){
  var node = evt.target.parentNode.children[0],
      nodeWidth = node.clientWidth,
      nodeHeight = node.clientHeight;
  node.style.width = (nodeWidth * .9)+"px";
  node.style.height = (nodeWidth * .9)+"px";
}

zoomInElement = document.getElementById("zoom-in");
zoomInElement.addEventListener("click",zoomIn);

zoomOutElement = document.getElementById("zoom-out");
zoomOutElement.addEventListener("click",zoomOut);