JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="gameStage">
        Normal Content 
    </div>
</body>

CSS

html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    background-color: #000
}
#gameStage {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: purple;
    border-style: solid;
    border-width: thin;
    border-radius: 3px;
    border-color: rgb(160, 160, 160);
}

JavaScript

$(window).load(function () {
    resizeWindow();
});

$(window).on('resize', function () {
    resizeWindow();
});

function resizeWindow() {
    var wHeight = $(document).height() - 20;
    var wWidth = $(document).width() - 20;
    var gameStage = $("#gameStage");
    if ((wWidth / 4) * 3 <= wHeight) {
        gameStage.css("width", wWidth + "px");
        gameStage.css("height", ((wWidth / 4) * 3) + "px");
        gameStage.css("top", (wHeight - ((wWidth / 4) * 3)) / 2 + 9 + "px");
        gameStage.css("left", "10px");
    } else {
        gameStage.css("height", wHeight + "px");
        gameStage.css("width", ((wHeight / 3) * 4) + "px");
        gameStage.css("left", (wWidth - ((wHeight / 3) * 4)) / 2 + 9 + "px");
        gameStage.css("top", "10px");
    }
}