JSFiddle - React, Tailwind, and code Playground

by Gowtham Reddy

HTML

<svg width="100%" height="100%" viewBox="0 0 300 200"
     xmlns="http://www.w3.org/2000/svg">
    <g class="value-scales">
      <g class="primary-scale">
        <text x="5" y="20" fill="deepPink">2</text>
        <text x="5" y="40" fill="deepPink">4</text>
        <text x="5" y="60" fill="deepPink">6</text>
       </g>
      <g class="secondary-scale">
        <text x="20" y="20" fill="red">100</text>
        <text x="20" y="60" fill="red">200</text>
      </g>
      <g class="secondary-scale">
        <text x="50" y="20" fill="blue">40</text>
        <text x="50" y="60" fill="blue">160</text>
      </g>
</svg>

CSS

`

JavaScript

var newText = document.createElementNS(text,"text");
newText.setAttributeNS(null,"x",100);     
newText.setAttributeNS(null,"y",1); 
newText.setAttributeNS(null,"font-size","10");

var textNode = document.createTextNode(200);
newText.appendChild(textNode);
document.getElementById("g").appendChild(newText);