JSFiddle - React, Tailwind, and code Playground

by GaryC123

HTML

<h1>jjjj</h1>
<p>ddd</p>

<span class="decreaseFont">a</span>
<span class="increaseFont">A</span>

CSS

body{
    font-size: 100%;
}
h1{
    font-size:1.5em
}
p{
    font-size:0.875em
}

JavaScript

$(document).ready(function(){
	var count = 0;
	var elements = ['h1', 'p'];
	$('.decreaseFont').click(function(){
		if(count >= -1){
			$(elements).each(function(key, val){
				$(val).css('font-size', ((parseInt($(val).css('font-size'))/16)-0.125) +"em");
			});
			count--;
		};
	});
	$('.increaseFont').click(function(){
		if(count <= 1){
			$(elements).each(function(key, val){
				$(val).css('font-size', ((parseInt($(val).css('font-size'))/16)+.125) +"em");
			});
			count++;
		};
	});
});