JSFiddle - React, Tailwind, and code Playground

HTML

<div id="layout">
    text text text
</div>

CSS

body {
    margin: 0;
}
#layout {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -360px;
    margin-top: -250px;
    width: 720px;
    height: 500px;
    background: blue;
    color: white;
    transform-origin: 50% 50%;
}

JavaScript

var $win = $(window);
var $lay = $('#layout');
var baseSize = {
    w: 720,
    h: 500    
}

function updateScale() {
    
    var ww = $win.width();
    var wh = $win.height();
    var newScale = 1;
    
    // compare ratios
    if(ww/wh < baseSize.w/baseSize.h) { // tall ratio
        newScale = ww / baseSize.w;
    } else { // wide ratio
        newScale = wh / baseSize.h;        
    }
    
    $lay.css('transform', 'scale(' + newScale + ',' +  newScale + ')');
    
    console.log(newScale);
}

$(window).resize(updateScale);