JSFiddle - React, Tailwind, and code Playground

by Dominik Wilk

HTML

<!DOCTYPE html>
<html lang="en" id="html">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>Nagłówek stopnia 1</h1>
  <h2>Nagłówek stopnia 2 <span>span</span></h2>
  <h3>Nagłówek stopnia 3 <span>span</span></h3>
  
  <button id="zmien">+</button>
</body>
</html>

SCSS

html {
  font-size: 10px;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1rem;
  
  span {
    font-size: 2em;
  }
}

span {
  font-size: 0.5em;
}

JavaScript

document.getElementById("zmien").addEventListener("click", zmien);

var fontSize = 16;

function zmien() {
  fontSize += 2; 
  document.querySelector('#html').style.fontSize = fontSize + "px"
}