JSFiddle - React, Tailwind, and code Playground

HTML

<button id="font-bigger">Font - Bigger</button>
<button id="font-default">Font - Default</button>
<button id="font-smaller">Font - Smaller</button>
<div id="container">
    <p>Here some text</p>
    <p>Here is some text again</p>
    <p>Here is some text again</p>
</div>
<button id="container-max">Container - Max</button>
<button id="container-default">Container - Default</button>
<button id="container-min">Container - Small</button>

CSS

#container {
    width: 500px;
    background: #CCC;
    padding: 10px;
    margin: 10px auto;   
}
p {
   margin: 5px 0;   
}

JavaScript

// font
// -------------------

// config

var font_size_default = $('body').css('font-size'); // default font size
var font_factor = 1.2; // factor to use for resize
var font_selector = $('p'); // container which contains the text to resize

var font_size_max = 30; // max font size in pixel
var font_size_min = 10; // min font size in pixel

// functions

$('#font-bigger').click(function () {
   var font_size_current = parseFloat(font_selector.css('font-size')); // get current font size
   var font_size_new = font_size_current * font_factor; // multi with factor
   
   if(font_size_new <= font_size_max) { // is not bigger than max size
       font_selector.css('fontSize', font_size_new); // apply
   }
});

$('#font-smaller').click(function () {
   var font_size_current = parseFloat(font_selector.css('font-size')); // get current font size
   var font_size_new = font_size_current / font_factor; // divi trow factor
    
   if(font_size_new >= font_size_min) { // is not smaller than min size
       font_selector.css('fontSize', font_size_new); // apply
   }
});

$('#font-default').click(function () {
   font_selector.css('fontSize', font_size_default); // only reset
});

// container
// -------------------

// config

var container_selector = $('#container'); // container to resize
var container_default = $('#container').width(); // default width
var container_min = 300; // min container width
// container_max not nessary

$('#container-max, #container-min, #container-default').click(function () {
    container_selector.stop(); // stops the animation if there is any animation
});

$('#container-max').click(function () {
    container_selector.animate({ width: '98%' });
});

$('#container-default').click(function () {
    container_selector.animate({ width: container_default + 'px' });
});

$('#container-min').click(function () {
    container_selector.animate({ width: container_min + 'px' });
});