JSFiddle - React, Tailwind, and code Playground

by zazvorniki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="container">
  <div id="info">
    <p>
      <a class="increaseFont">+</a> |
      <a class="decreaseFont">-</a> |
      <a class="resetFont">=</a>
    </p>
   <p>
   Increace or decreace font size of the text below by using the buttons above.
   </p>
  </div>

 <div id="sections">
  <span>Font size can be changed in this section</span>
  <p class="section1">This won't be affected</p>
  <p class="section2">This one is adjustable too!</p>
 </div>
</div>

CSS

html{
  background-color:#fff;
  height:100%;
  width:100%;
}

body{
  background-color:#f4fcfa;
  height:100%;
  width:100%;
  padding:0;
  margin:0;
}
.container{
   margin: auto;
  width: 80%;
  padding-top:2em;
}

#info{
  font-size:1.2em;
  text-align:center;
}

#info p{
  margin-bottom: .2em;
}

#info p a{
  padding:0 .8em;
  margin: 0 .2em;
  font-size:1.5em;
  width:100px;
  border-radius:.1em;
  background-color:#1f6c5c;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
  user-select: none;
}

#info p a:hover{
  background-color:#2a947d;
  width:3em;
  color:#fff;
}

#sections{
  margin-top:1em;
  border: 3px dashed #964680;
  padding:.5em;
}

JavaScript

$(document).ready(function(){

	//ID, class and tag element that font size is adjustable in this array
	//Put in html or body if you want the font of the entire page adjustable
	var section = new Array('span','.section2');
	section = section.join(',');

	// Reset Font Size
	var originalFontSize = $(section).css('font-size');  
		$(".resetFont").click(function(){
		$(section).css('font-size', originalFontSize);
	});
	// Increase Font Size
	$(".increaseFont").click(function(){
		var currentFontSize = $(section).css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);
		var newFontSize = currentFontSizeNum*1.2;
		$(section).css('font-size', newFontSize);
		return false;
	});
  
	// Decrease Font Size
	$(".decreaseFont").click(function(){
		var currentFontSize = $(section).css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);
		var newFontSize = currentFontSizeNum*0.8;
		$(section).css('font-size', newFontSize);
		return false;
	});
});