JSFiddle - React, Tailwind, and code Playground

by Elight7

HTML

<h1>Tiger</h1>
<h2>(From Wikipedia, the free encyclopedia)</h2>
<p>The tiger (Panthera tigris) is the largest cat species, most recognizable for
  their pattern of dark vertical stripes on reddish-orange fur with a lighter underside.
  The species is classified in the genus Panthera with the lion, leopard, jaguar, and snow leopard.</p>
<a href="#" id="size-10px">Font size 10</a>
<a href="#" id="size-20px">Font size 20</a>
<a href="#" id="size-30px">Font size 30</a>

CSS

h1 {
  color: blue;
  font-size: 25px;
  margin: 10px;
}
h2 {
  color: blue;
  font-size: 15px;
  margin: 10px;
}
p {
  margin: 10px;
}
a {
  margin: 10px;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid grey;
  background-color: cyan;
  color: black;
  padding: 3px;
}

JavaScript

function sizeChanger(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}
var size10 = sizeChanger(10);
var size20 = sizeChanger(20);
var size30 = sizeChanger(30);

document.getElementById('size-10px').onclick = size10;
document.getElementById('size-20px').onclick = size20;
document.getElementById('size-30px').onclick = size30;