JSFiddle - React, Tailwind, and code Playground

by KendoDev

HTML

<button id = "button1">
 Show in Red
 </button> 
 <button id = "button2">
 Show in Green
 </button> <br><br

<div>
<svg width="200" height="100">
  <rect id="rect1" x="0" y="0" width="200" height="100" fill="lime"/>
  <text id="text1" x="50%" y="52%" alignment-baseline="middle" text-anchor="middle" font-family= "Arial Unicode MS" font-size= "200%" fill= "#606b67">50%</text>    
</svg>
</div>

JavaScript

var button1 = document.getElementById("button1");
button1.onclick = function () {
var rect = document.getElementById("rect1");
rect.setAttribute("fill", "red"); 
rect.setAttribute("stroke", "red");
rect.setAttribute("stroke-width", "3px");
}

var button2 = document.getElementById("button2");
button2.onclick = function () {
var rect = document.getElementById("rect1");
rect.setAttribute("fill", "lime");
rect.setAttribute("stroke", "lime");
rect.setAttribute("stroke-width", "3px");
}