JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="100%" height="100%" viewBox="0 0 500 500">
  <g id="cartesian" transform="translate(0,500) scale(1,-1)">
    <g class="data">
      <line x1="0%"  y1="75%" x2="50%"  y2="40%" ></line>
      <line x1="50%" y1="40%" x2="100%" y2="60%"></line>
    </g>
    <g class="y label">
      <text x="0%" y="50%"> 10% </text>
      <text x="0%" y="90%"> 20% </text>
    </g>
  </g>
</svg>

CSS

.grid {stroke: black; stroke-width: 1; stroke-dasharray: 1 2}
 .label{font-family: courier new; fill: black; font-size: 14px}
 .data {stroke: black; stroke-width: 1}