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" font-family="Nunito Sans" font-size="16" font-weight="700" fill="#444444">
     Low
   </text>
   <text x="290" y="20" font-family="Nunito Sans" font-size="16" font-weight="700" fill="#444444">
     Normal
   </text>
   <text x="560" y="20" font-family="Nunito Sans" font-size="16" font-weight="700" fill="#444444">
     High
   </text>

   <rect x="0" y="30" width="200" height="50" rx="25" ry="25" fill="#DB4437"></rect>
   <rect x="70" y="30" width="200" height="50" rx="0" ry="0" fill="#DB4437"></rect>
   <text x="100" y="60" font-family="Nunito Sans" font-size="16" font-weight="700" fill="white">
     &lt; {ele.testDefaults.lowThreshold}
   </text>
   <rect x="290" y="25" width="250" height="60" rx="0" ry="0" fill="#0F9D58"></rect>
   <text x="390" y="60" font-family="Nunito Sans" font-size="16" font-weight="700" fill="white">
     {ele.testDefaults.lowThreshold} - {ele.testDefaults.highThreshold}
   </text>
   <rect x="630" y="30" width="200" height="50" rx="25" ry="25" fill="#DB4437"></rect>
   <rect x="560" y="30" width="200" height="50" rx="0" ry="0" fill="#DB4437"></rect>
   <text x="660" y="60" font-family="Nunito Sans" font-size="16" font-weight="700" fill="white">
     &gt; {ele.testDefaults.highThreshold}
   </text>
   <path d="M280 85 L260 110 L300 110 Z"></path>
 </svg>


<svg width="100%" height="10%" viewBox="0 0 850 130">
   <text x="15" y="20" font-family="Nunito Sans" font-size="16" font-weight="700" fill="#444444">
     Low
   </text>
   <text x="290" y="20" font-family="Nunito Sans" font-size="16" font-weight="700" fill="#444444">
     Normal
   </text>
   <text x="560" y="20" font-family="Nunito Sans" font-size="16" font-weight="700" fill="#444444">
     High
   </text>

   <rect x="0" y="25" width="200" height="60" rx="25" ry="25" fill="#DB4437"></rect> 
   <rect x="70" y="25" width="200" height="60" rx="0" ry="0" fill="#DB4437"></rect>
   <text x="100" y="60"...

CSS

Height aur y ki value change karni hai ek block ko bada karne ke liye --> y me -5 karna hai dono jagah, aur height me +10 karna hai bas

Aur arrow ko move karne ke liye, last me likhe path me ke M'yaha point daalna hai' aur L'yaha point - 20' aur dusre L'point plus twenty daalna' hai