JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div class="fullscreen-container">
	  <div class="fullscreen-element">
		  <button class="make-fullscreen">Fullscreen</button>
	  </div>
    <div class="other-element">
		  other element
	  </div>
	  </div>
	<script src="script.js"></script>
</body>

</html>

CSS

body {
  background: orange;
}

.fullscreen-element {
  width: 400px;
  height: 400px;
  background: red;
}

.other-element {
  width: 100px;
  height: 100px;
  padding: 24px;
  background: blue;
  position: fixed;
  top: 60px;
  left: 60px;
  color: white;
}

JavaScript

(() => {
  const btn = document.querySelector(".make-fullscreen");

  btn.addEventListener("click", () => {
    const element = document.querySelector(".fullscreen-container");
    console.log(element);
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else {
      return;
    }
  });
})();