JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  <div id="content">
  <H1>
  aaaa
  </H1>
  <H2>
  bbbb
  </H2>
  <p>cccc</p>
    text
  </div>

CSS

*
{
   margin: 0;
}
body
{
   background-color: black;
   width: 100%;
   height: 100%;
}
#wrapper
{
   font-size:100%;
   background-color: white;
   margin: 0 auto;
}
#content
{
   font-family:"Times New Roman";
   font-size:80%;
}

h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

JavaScript

window.onload = function()
   {
      window.onresize();
   }

   window.onresize = function()
   {
        var width = window.innerWidth;
        var height = window.innerHeight - 100;

        if (width / 4 > height / 3)
        {
           width = height / 3 * 4;
        }
        else
        {
           height = width / 24 * 3;
        }
        var wrapper = document.getElementById("wrapper");
        wrapper.style.height = height + "px";
        wrapper.style.width = width + "px";
        wrapper.style.fontSize = (height) + "%";
        wrapper.style.top = 100 + "px";
   }