JSFiddle - React, Tailwind, and code Playground

by Soviut

HTML

<div id="parent">
    this is
</div>
<div id="child">
    a test
</div>
<div id="grandchild">
    in here
</div>

CSS

body {
    margin: 0;
    padding: 0;
}

div {
    height: 130rem;
}

html {
    font-size: 960px;
}

html > * {
    font-size: 20px;
}

#parent {
    width: 960rem;
    
    background: blue;
    font-size: 60rem;
}

#child {
    width: 480rem;

    background: green;
    font-size: 60rem;
}

#grandchild {
    width: 240rem;

    background: red;
    font-size: 60rem;
}

JavaScript

$(window).on('resize', function() {
    $('html').css('font-size', window.innerWidth / 960);
});
$(window).resize();