JSFiddle - React, Tailwind, and code Playground

HTML

<div id="calc"><h1>Press </br>the</br><span class="red">red</span></br> button</h1></div>

CSS

body {background:yellow;padding:50px}

#calc {background:url(http://2.imimg.com/data2/WC/YF/MY-2993865/a-250x250.jpg);width:250px; height:250px}

#calc h1{ font-family:impact; font-weight:6em; text-align:center}

.red {color:red}

JavaScript

$( document ).ready( function() {
                var $body = $('body'); //Cache this for performance
                
                var setBodyScale = function() {
                    var scaleFactor = 0.35,
                        scaleSource = $body.width(),
                        maxScale = 800,
                        minScale = 30;

                    var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:

                    if (fontSize > maxScale) fontSize = maxScale;
                    if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums

                    $('body').css('font-size', fontSize + '%');
                }
            
                $(window).resize(function(){
                    setBodyScale();
                });
                
                //Fire it when the page first loads:
                setBodyScale();
            });