JSFiddle - React, Tailwind, and code Playground

by jitendravyas

HTML

<h1>Grow and shrink</h1>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

CSS

h1, select {font-size:2em}

JavaScript

$( document ).ready( function() {
                var $body = $('body'); //Cache this for performance
                
                var setBodyScale = function() {
                    var scaleFactor = 0.35,
                        scaleSource = $body.width(),
                        maxScale = 600,
                        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();
            });