JSFiddle - React, Tailwind, and code Playground

by cgough

HTML

<div class="table-wrapper" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <table class="table">
    <tr>
      <td class="table-data1">
        <p>70%</p>
        <p>NotReady</p>
        <p>1:02:56</p>
      </td>
      <td class="table-data2">
        <p>25%</p>
        <p>Wrapping</p>
        <p>1:02:56</p>
      </td>
    </tr>
    <tr>
      <td class="table-data3">
        <p>30%</p>
        <p>Ready </p>
        <p>1:02:56</p>
      </td>
      <td class="table-data4">
        <p>45%</p>
        <p>Talking </p>
        <p>1:02:56</p>
      </td>
    </tr>
  </table>
</div>
<button id="big">A+</button>
<button id="normal">Default</button>
<button id="small">a-</button>

CSS

.table-wrapper {
  width: 100%;
  height: 100%;
  background-color: #ccc; 
}

.table,
tr {
  width: 100%;
  height: 100%;
}

td {
  color: white;
  margin: 2px;
  text-align: center;
  padding: 2px;
  width: 50%;
  height: 50%;
}

.table-data1 {
  background-color: red;
}

.table-data2 {
  background-color: orange;
}

.table-data3 {
  background-color: blue;
}

.table-data4 {
  background-color: green;
}

JavaScript

size=parseInt($('p').css('font-size'));

  
$("#big").on("click",function(){
 
  size+=2;
   $("p").css("font-size",size + "px");
});
$("#normal").on("click",function(){
  size=14;
   $("p").css("font-size",size + "px");
});
$("#small").on("click",function(){
  
  size-=2;
  if(size>=0){
   $("p").css("font-size",size+ "px");
  }else{
    alert("VLAUE IS MINUS SO RESET TO 14px");
    size=14
    $("p").css("font-size",size+ "px");
  }
});