JSFiddle - React, Tailwind, and code Playground

HTML

<div class="font__box">
  <button class="font__item" data-font="13%">btn 1</button>
  <button class="font__item" data-font="26%">btn 2</button>
  <button class="font__item" data-font="39%">btn 3</button>
</div>


<h3>titlr</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima magni recusandae dolore, odit sunt perspiciatis sequi natus cupiditate ad officia, doloribus aperiam qui quibusdam voluptatem ullam vel, eum mollitia officiis?</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CSS

.panel {
	background: linear-gradient(180deg, #004386 0%, #0065CA 100%);
	background-color: rgba(229, 229, 229, 0.3);
	padding-top: 45px;
}

.panel__wrap {
	display: flex;
	justify-content: center;
	//align-items: center;
	margin: 0 -10px;
}

.panel__item {
	display: flex;
	flex-direction: column;
	width: calc(100% / 5 - 20px);
	margin: 0 10px;
	margin-bottom: 28px;
  border: 1px solid red;
}

.panel__link {
	display: block;
	//opacity: 0;
	//visibility: hidden;
	font-size: 13px;
	line-height: 1.17;
	color: red;
	text-align: center;
	text-transform: uppercase;
	margin-top: auto;
	transition: 0.3s opacity;
}

.panel__image {
	margin-bottom: 4px;
}

.panel__image img {
	display: block;
	margin: 0 auto;
}

html {
  font-size: 16px;
}  

h3 {
  font-size: 2em;
}

p {
  font-size: 1.4em;
}

JavaScript

$(document).ready(function() {



   let btnFont = $('.font__item');
   btnFont.on('click', function() {
     let elem = parseInt($(this).data('font'));
     let value = (16 * (100 + elem)) / 100;
     $('html').css({
       'fontSize': `${value}px`
     });

     /*  let UTCDate = new Date(new Date().setFullYear(new Date().getFullYear() + 1)).toUTCString();
       document.cookie = `${name}=${value}; path=/; expires=${UTCDate};`;
       */
   })


 });