JSFiddle - React, Tailwind, and code Playground

by dorward

HTML

<div id="one">
    One
</div>

<div id="two">
    Two
</div>

<button>one</button>
<button>two</button>

CSS

div {
    width: 200px;
    height: 200px;
}
#one { background: yellow; }
#two { background: pink; }

JavaScript

addEventListener("click", event => {
    const btn = event.target;
    if (btn.tagName.toLowerCase() !== "button") return;
    const id = btn.textContent;
    const div = document.getElementById(id);
    if (div.requestFullscreen) 
	    div.requestFullscreen();
    else if (div.webkitRequestFullscreen) 
    	div.webkitRequestFullscreen();
    else if (div.msRequestFullScreen) 
      div.msRequestFullScreen();
});