JSFiddle - React, Tailwind, and code Playground

HTML

<div id="full">
  <input type="button" value="clique para alternar" onclick="toggleFullScreen('full')">

  <div class="red">
  </div>
</div>

<br/>
<div id="full2">
  <input type="button" value="clique para alternar" onclick="toggleFullScreen('full2')">

  <div class="blue">
  </div>
</div>

CSS

.red {
  background-color: red;
  height: 200px;
  width: 200px;
}

.blue {
  background-color: blue;
  height: 200px;
  width: 200px;
}

JavaScript

function toggleFullScreen(id) {

  var div = document.getElementById(id);
  
  if ((document.fullScreenElement && document.fullScreenElement !== null) ||
    (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (div.requestFullScreen) {
      div.requestFullScreen();
    } else if (div.mozRequestFullScreen) {
      div.mozRequestFullScreen();
    } else if (div.webkitRequestFullScreen) {
      div.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
  }
}