JSFiddle - React, Tailwind, and code Playground

HTML

<h1 class="gradient" data-text="Galaxy">Galaxy</h1>
<h4>Colour 1</h4>
<button class="add10">Add 10%</button>
<button class="take10">Take 10%</button>
<button class="tonum" data-to="0">To 0%</button>
<button class="tonum" data-to="50">To 50%</button>
<button class="tonum" data-to="100">To 100%</button>
<hr/>
<h4>Colour 2</h4>
<button class="add102">Add 10%</button>
<button class="take102">Take 10%</button>
<button class="tonum2" data-to="0">To 0%</button>
<button class="tonum2" data-to="50">To 50%</button>
<button class="tonum2" data-to="100">To 100%</button>

CSS

.gradient {
	font-family: Arial;
	font-size: 5em;
	text-align: center;
	background: #CCC;
	-webkit-background-clip: text;
	background-clip: text;
	color: rgba(0,0,0,0);
	position: relative;
}
.gradient:after {
	background: #C05DA5;
	content: attr(data-text);
	-webkit-background-clip: text;
    -moz-background-clip: text;
	background-clip: text;
	height: 0%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;

	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.gradient:before {
	background: #5090D0;
	content: attr(data-text);
	-webkit-background-clip: text;
    -moz-background-clip: text;
	background-clip: text;
	height: 0%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;

	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.gradient.start10:after,
.gradient.end10:before {
	height: 10%;
}
.gradient.start20:after,
.gradient.end20:before {
	height: 20%;
}
.gradient.start30:after,
.gradient.end30:before {
	height: 30%;
}
.gradient.start40:after,
.gradient.end40:before {
	height: 40%;
}
.gradient.start50:after,
.gradient.end50:before {
	height: 50%;
}
.gradient.start60:after,
.gradient.end60:before {
	height: 60%;
}
.gradient.start70:after,
.gradient.end70:before {
	height: 70%;
}
.gradient.start80:after,
.gradient.end80:before {
	height: 80%;
}
.gradient.start90:after,
.gradient.end90:before {
	height: 90%;
}
.gradient.start100:after,
.gradient.end100:before {
	height: 100%;
}

JavaScript

$(function()
  {
     
      var objButton = $(".add10");
      var objButton2 = $(".take10");
      var objButton3 = $(".tonum");
      var objEl = $(".gradient");
      var intNum = 0;
      objButton.on("click", function()
      {
      
          intNum = intNum + 10;
          if(intNum > 100)
          {
              
              intNum = 100;
              
          }
          objEl.removeClass(function (index, css) {
                return (css.match (/\bstart\S+/g) || []).join(' ');
            }).addClass("start" + intNum);
          
      });
      objButton2.on("click", function()
      {
      
          intNum = intNum - 10;
          if(intNum < 0)
          {
              
              intNum = 0;
              
          }
          objEl.removeClass(function (index, css) {
                return (css.match (/\bstart\S+/g) || []).join(' ');
            }).addClass("start" + intNum);
          
      });
      objButton3.on("click", function()
      {
      
          intNum = $(this).data("to");
          objEl.removeClass(function (index, css) {
                return (css.match (/\bstart\S+/g) || []).join(' ');
            }).addClass("start" + intNum);
          
      });
      
      var objButtonX = $(".add102");
      var objButtonX2 = $(".take102");
      var objButtonX3 = $(".tonum2");
      var intNumX = 0;
      objButtonX.on("click", function()
      {
      
          intNumX = intNumX + 10;
          if(intNumX > 100)
          {
              
              intNumX = 100;
              
          }
          objEl.removeClass(function (index, css) {
                return (css.match (/\bend\S+/g) || []).join(' ');
            }).addClass("end" + intNumX);
          
      });
      objButtonX2.on("click", function()
      {
      
          intNumX = intNumX - 10;
          if(intNumX < 0)
          {
              
              intNumX = 0;
              
          }
          objEl.removeClass(function (index, css) {
   ...