JSFiddle - React, Tailwind, and code Playground

by abhishek_soni

HTML

<svg width="100%" height="10%" viewBox="0 0 850 130">
  <text x=15 y=20 fontFamily="Nunito Sans" fontSize="16" fontWeight="700" fill="#444444">
    Low
  </text>
  <text x=210 y=20 fontFamily="Nunito Sans" fontSize="16" fontWeight="700" fill="#444444">
    Normal
  </text>
  <text x=420 y=20 fontFamily="Nunito Sans" fontSize="16" fontWeight="700" fill="#444444">
    Normal Second
  </text>
  <text x=630 y=20 fontFamily="Nunito Sans" fontSize="16" fontWeight="700" fill="#444444">
    High
  </text>

  <rect x=0 y=40 width="130" height=40 rx=20 ry=20 fill="#DB4437"></rect>
  <rect x=70 y=40 width="130" height=40 rx="0" ry="0" fill="#DB4437"></rect>
  <text x=100 y=65 fontFamily="Nunito Sans" fontSize="17" fontWeight="700" fill="white">
    &lt; {ele.testDefaults.lowThreshold}
  </text>
  <rect x=210 y=40 width="200" height=40 rx="0" ry="0" fill="#0F9D58"></rect>
  <text x=380 y=65 fontFamily="Nunito Sans" fontSize="17" fontWeight="700" fill="white">
    {ele.testDefaults.lowThreshold} -{" "}
    {ele.testDefaults.highThreshold}
  </text>
  <rect x=420 y=40 width="200" height=40 rx="0" ry="0" fill="#0F9D58"></rect>
  <text x=680 y=65 fontFamily="Nunito Sans" fontSize="17" fontWeight="700" fill="white">
    {ele.testDefaults.lowThreshold} -{" "}
    {ele.testDefaults.highThreshold}
  </text>
  <rect x=700 y=40 width="130" height=40 rx=20 ry=20 fill="#DB4437"></rect>
  <rect x=630 y=40 width="130" height=40 rx="0" ry="0" fill="#DB4437"></rect>
  <text x=660 y=65 fontFamily="Nunito Sans" fontSize="17" fontWeight="700" fill="white">
    &gt; {ele.testDefaults.highThreshold}
  </text>
  <path className="rotate-css" d={`M${youX} 85 L${youX - 10} 100 L${youX + 10} 100 Z`}></path>
</svg>

JavaScript

let h1 = 40, h2 = 40, h3 = 40, h4 = 40, h5 = 40;
  let x1 = 15, x2 = 280, x3 = 560, x4 = 0, x5 = 70, x6 = 100, x7 = 280, x8 = 380, x9 = 630, x10 = 560, x11 = 660;
  let y1 = 20, y2 = 20, y3 = 20, y4 = 40, y5 = 40, y6 = 65, y7 = 40, y8 = 65, y9 = 40, y10 = 40, y11 = 65;
  let rx1 = 20, ry1 = 20, rx4 = 20, ry4 = 20;
 
 // New ones
 
 x2 = 210, x3 = 630, x9 = 700;
 let x12,x13 = 420;