JSFiddle - React, Tailwind, and code Playground

by Ying Chor Ding

HTML

<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>

<h2>Lorem ipsum dolor sit amet, consectetur.</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic modi quasi deleniti.</p>
<p>Sint dolor tenetur quis cum minima amet labore rerum libero eligendi delectus.</p>
<p>Labore dolores facilis totam nostrum deleniti quidem ad at quam cum eaque?</p>

<button class="js-font" data-size="big">Bigger</button>
<button class="js-font" data-size="normal">Normal</button>
<button class="js-font" data-size="small">Smaller</button>

CSS

body, body.normal {
    font-size: 14px;
}
body.big {
    font-size: 16px;
}
body.small {
    font-size: 12px;
}

JavaScript

//resize font
$(function() {

    $('.js-font').on('click', function() {
        $('body')
            .attr('class', '')
            .addClass($(this).data('size'));
    });

});