JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <head></head>

  <body>
    <p>Click the image to make it fullscreen</p>
    <img id="demo-img" src="https://sindresorhus.com/unicorn" width="500">
    <script type="text/javascript">
      const imageElem = document.getElementById('demo-img');
      let clicked = false;
      let isFullscreen = false;

      function toggleFullscreen() {
        if (isFullscreen) {
          isFullscreen = false;
          document.body.style.cursor = 'auto';
          imageElem.exitFullscreen();
        } else {
          isFullscreen = true;
          document.body.style.cursor = 'none';
          imageElem.requestFullscreen();
        }
      }

      imageElem.addEventListener('click', e => {
        clicked = true;
        toggleFullscreen();
      });
      imageElem.addEventListener('fullscreenchange', () => {
        if (!clicked) {
          toggleFullscreen();
        }

        clicked = false;
      });

    </script>
  </body>

</html>