JSFiddle - React, Tailwind, and code Playground

JavaScript

/// desktop version (no touch events)

var testDiv = document.createElement("div");
testDiv.style.id = "fstest";
testDiv.style.backgroundColor = "#FFAA88";
testDiv.style.width = "300px";
testDiv.style.height = "200px";
testDiv.style.position = "absolute";
testDiv.style.left = "20px";
testDiv.style.top = "20px";
testDiv.style.border = "1px solid black";
testDiv.style.overflow = "hidden";
testDiv.style.cursor = "pointer";
testDiv.onclick = handleOnClick;
document.body.appendChild(testDiv);

var fsActive = false;

function handleOnClick(e)
{
    fsActive = !fsActive;
    if(fsActive) goFS();
    else exitFS();
}

function goFS()
{
    if(testDiv.requestFullscreen)
    {
        testDiv.innerHTML = "native requestFullscreen found";
        testDiv.requestFullscreen();
    }
    else if(testDiv.mozRequestFullScreen) 
    {
        testDiv.innerHTML = "mozilla mozRequestFullScreen found";
        testDiv.mozRequestFullScreen();
    }
    else if(testDiv.webkitRequestFullscreen)
    {
        testDiv.innerHTML = "webkit webkitRequestFullscreen found";
        testDiv.webkitRequestFullscreen();
    }
    else 
        alert("fullscreen not supported");
}
function exitFS()
{
    if(document.cancelFullScreen)
    {
        testDiv.innerHTML = "native cancelFullScreen found";
        document.cancelFullScreen();
    }
    else if(document.mozCancelFullScreen)
    {
        testDiv.innerHTML = "mozilla mozCancelFullScreen found";
        document.mozCancelFullScreen();
    }
    else if(document.webkitExitFullscreen)
    {
        testDiv.innerHTML = "webkit webkitExitFullscreen found";
        document.webkitExitFullscreen();
    }
    else 
        alert("fullscreen not supported");
}