JSFiddle - React, Tailwind, and code Playground

HTML

<h3 id="flexibleHeaderA">Hello I'm flexible header</h3>
  <h3 id="flexibleHeaderB">Hello I'm flexible header</h3>
  <h3 id="flexibleHeaderC">Hello I'm flexible header</h3>
  <h3 id="flexibleHeaderD">Hello I'm flexible header</h3>
  <h3 id="flexibleHeaderE">Hello I'm flexible header</h3>

CSS

h3{
  border:dotted 1px #33aaff;
  margin:10px;
  text-align:center;
}

JavaScript

var a = document.getElementById('flexibleHeaderA');
	var b = document.getElementById('flexibleHeaderB');
	var c = document.getElementById('flexibleHeaderC');
	var d = document.getElementById('flexibleHeaderD');
	var e = document.getElementById('flexibleHeaderE');
  
  var settingA = alignFont.bind(this,a,24,600,1,20,30);
  var settingB = alignFont.bind(this,b,24,600,1.5,12,60);
  var settingC = alignFont.bind(this,c,30,600,1,15,35);
  var settingD = alignFont.bind(this,d,22,1000,.5,12,30);
  var settingE = alignFont.bind(this,e,16,80,1,12,26);
  	
	settingA();
  settingB();
  settingC();
  settingD();
  settingE();
  
	window.addEventListener('resize',function(){
  		settingA(); 
      settingB();
      settingC();
      settingD();
      settingE();
	}); 
 
  
function alignFont(getElement,defaultSize,defaultWidth,acceleration,min,max){
	var cWidth = document.body.offsetWidth;
  var newSize = (Math.pow(cWidth/defaultWidth,acceleration))*defaultSize;
  var limitSize = newSize >= max ? max:newSize<=min ? min:newSize;
  
	getElement.style.fontSize = limitSize+"px";
}