JSFiddle - React, Tailwind, and code Playground

by jeremyfrank

HTML

<button type="button">Increase font-size by 1px</button>

<ul>
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link Two</a></li>
	<li><a href="#">Link 3</a></li>
	<li><a href="#">Link Four</a></li>
</ul>

CSS

@import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400);

body {
	font-family: "Gentium Basic", serif;
	text-rendering: optimizeLegibility;
	font-size: 18px;
}

li {
	float: left;
	margin: 0 1em;
}

JavaScript

document.body.style.fontSize = "18px";

var button = document.getElementsByTagName("button");

button[0].addEventListener('click', function() {
    document.body.style.fontSize = parseFloat(document.body.style.fontSize) + 1 + "px";
});