JSFiddle - React, Tailwind, and code Playground

HTML

<div id="color" class="linear">

</div>

<button id="reverse" style="margin-top:50px">
  Reverse Gradient
</button>

CSS

.linear {
  width: 200px;
  height: 30px;
}

JavaScript

var color = document.getElementById('color');
var btn = document.getElementById('reverse');
myVar = "left";

function colorfn() {
  color.style.background = "linear-gradient(to " + myVar + ", rgb(237,195 ,194) 0% ,rgb(237,195 ,194) 20%, rgb(226,167 ,165) 20% ,rgb(226,167 ,165) 40%, rgb(215,138 ,136) 40% ,rgb(215,138 ,136) 60%, rgb(203,110 ,106) 60% ,rgb(203,110 ,106) 80%, rgb(192,81 ,77) 80% ,rgb(192,81 ,77) 100%)";
}
btn.onclick = function() {
  myVar = myVar == "top" ? "bottom" : "top";
  colorfn();
}

colorfn();