JSFiddle - React, Tailwind, and code Playground

by the_archer

HTML

<head>
    <title>Font Sizer</title>
</head>
<body>
    <a id="increase" href="#">+</a><br/>
    <a id="decrease" href="#">-</a>
    <p>blah blah blah blah blah blah blah blah blah</p>
</body>

CSS

a
{
    text-decoration:none;
}

JavaScript

$(document).ready(function() {
    var textsize = $('p').css("font-size");
    var textunit = textsize.slice(-2);
    textsize = parseFloat(textsize, 10);

    $('a').click(function() {
        if (this.id == "increase") 
        {
            textsize++;
            $('p').css('font-size', textsize + textunit);
        }
        else 
        {
            textsize--;
            $('p').css('font-size', textsize + textunit);
        }
    });

});