JSFiddle - React, Tailwind, and code Playground

HTML

<div style="cursor:pointer; width: 100px; background: red;" id="toggle-fs">
  <img src="/images/fs.png">
</div>

JavaScript

document.getElementById("toggle-fs").addEventListener("click", function() {
  toggleFS()
});

function isFullScreen() {
  return (document.fullScreenElement && document.fullScreenElement !== null) ||
    (document.msFullscreenElement && document.msFullscreenElement !== null) ||
    (document.mozFullScreen || document.webkitIsFullScreen);
}

function enterFS() {
  var page = document.documentElement
  if (page.requestFullscreen) page.requestFullscreen();
  else if (page.mozRequestFullScreen) page.mozRequestFullScreen();
  else if (page.msRequestFullscreen) page.msRequestFullscreen();
  else if (page.webkitRequestFullScreen) page.webkitRequestFullScreen();
}

function exitFS() {
  if (document.exitFullScreen) return document.exitFullScreen();
  else if (document.webkitExitFullscreen) return document.webkitExitFullscreen();
  else if (document.msExitFullscreen) return document.msExitFullscreen();
  else if (document.mozCancelFullScreen) return document.mozCancelFullScreen();
}

function toggleFS() {
  if (!isFullScreen()) {
    enterFS();
    document.getElementById("toggle-fs").innerHTML = '<img src="/images/nofs.png">';
  } else {
    exitFS();
    document.getElementById("toggle-fs").innerHTML = '<img src="/images/fs.png">';
  }
}