JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
  <h1>H1 Main Header</h1>
</div>

<div class="sidebar">
  <h2>H2 Side menu</h2>
  <ul>
    <li><a href="#">Sidebar link</a></li>
    <li><a href="#">Sidebar link</a></li>
  </ul>
</div>

<div class="content">
  <h2>H2 Section heading</h2>
  
  <p>
Mussum Ipsum, cacilds vidis litro abertis. Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio. Cevadis im ampola pa arma uma pindureta. Viva Forevis aptent taciti sociosqu ad litora torquent. Atirei o pau no gatis, per gatis num morreus.
  </p>
  
  <h3>H3 Subheading</h3>
  
  <p>
  Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis. Detraxit consequat et quo num tendi nada. Leite de capivaris, leite de mula manquis sem cabeça. Diuretics paradis num copo é motivis de denguis.
  </p>
</div>

CSS

/* Ajustes no html */
html {
  font-size: 18px;
  font-family: Arial, sans-serif;
}
body {
  padding: 0 1rem;
}
h1 {
  margin-top: 0;
}
@media (max-width: 900px) {
  html { font-size: 15px; }
}
@media (max-width: 400px) {
  html { font-size: 13px; }
}

/* módulos vão escalar com o documento */
.header {
  font-size: 1.5rem;
}
.footer {
  font-size: 0.75rem;
}
.sidebar {
  font-size: 0.85rem;
}

/* tipos escalão com os módulos */
h1 {
  font-size: 3em;
}
h2 {
  font-size: 2.5em;
}
h3 {
  font-size: 2em;
}

/* layout */

.content {
  float: left;
  width: 70%;
}

.sidebar {
  float: right;
  width: 25%;
}

@media (max-width: 900px) {
  .content { width: 60%; }
  .sidebar { width: 40%; }
}
@media (max-width: 400px) {
  .content, .sidebar { float: none; width: auto; }
}

JavaScript

setInterval(function(){

var el = document.querySelector('html');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style);
console.log(fontSize);

}, 500)

//credits to adrian sandu