JSFiddle - React, Tailwind, and code Playground

HTML

<button id='fullscreenBtn'>
Toggle fullscreen
</button>
<div>

</div>

CSS

div {
  margin-top: 16px;
  width: 300px;
  height: 300px;
  background-color: blue;
}

@media all and (display-mode: fullscreen) {
  div {
    background-color: red;
  }
}

JavaScript

const btn = document.querySelector('#fullscreenBtn');

btn.addEventListener('click', e => {
	if (
    document.fullscreenElement || document.webkitFullscreenElement
  ) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (
      document.webkitExitFullscreen
    ) {
      document.webkitExitFullscreen();
    }
  } else {
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (
      document.documentElement.webkitRequestFullscreen
    ) {
      document.documentElement.webkitRequestFullscreen();
    }
  }
})