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="M450 85 L430 110 L470 110 Z"></path>
  </svg>