JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <!--<meta http-equiv='X-UA-Compatible' content='IE=edge'>-->
    <title>Closures</title>
    <!--<meta name='viewport' content='width=device-width, initial-scale=1'>-->
    <link rel='stylesheet' type='text/css' media='screen' href='css/style.css'>
</head>
<body>
    <p>Some paragraph text</p>
    <h1>some heading 1 text</h1>
    <h2>some heading 2 text</h2>

    <a href="#" id="size-12">12</a>
    <a href="#" id="size-14">14</a>
    <a href="#" id="size-16">16</a>

    <p><a href='#' id="test">Test</a></p>
</body>
    <script src='js/index.js'></script>
</html>

CSS

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}

h1 {
  font-size: 1.5em;
}
h2 {
  font-size: 1.2em;
}

JavaScript

function makeSizer(size) {
  return function () {
    document.body.style.fontSize = size + 'px';
  }
}

document.getElementById('size-12').onclick = makeSizer(12);
document.getElementById('size-14').onclick = makeSizer(14);
document.getElementById('size-16').onclick = makeSizer(16);

document.getElementById('test').onclick = function() { document.body.style.fontSize = '30px'};