JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  <div id="clickThis" onClick="openFullscreen()"></div>
</div>

CSS

#wrapper {
  width: 500px;
  min-height: 300px;
  max-height: 300px;
  background-color: red;
}
#clickThis {
  background-color: green;
  min-width: 100px;
  min-height: 100px;
  max-width: 100px;
}

JavaScript

// attempt at full screen
var elem = document.documentElement;

/* View in fullscreen */
function openFullscreen() {
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) { /* Firefox */
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
        elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE/Edge */
        elem.msRequestFullscreen();
    }
  let calcZoom = (window.screen.height / 300) * .98;
  document.getElementById("wrapper").style.zoom = calcZoom;
}

/* Close fullscreen */
function closeFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) { /* Firefox */
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { /* IE/Edge */
        document.msExitFullscreen();
    }
    document.getElementById("wrapper").style.zoom = "";
}