JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80">
  <line  stroke-width="2" stroke-dasharray="3, 1,1, 1, 1, 1"  y1="0"   x2="80"   y2="0"/>
  <line onClick='lineclick()' class="green" stroke-width="4" stroke-dasharray="1, 1, 2, 1"  y1="80"  x2="0" y2="0"/>
  <line class="green" stroke-width="2" stroke-dasharray="1, 1, 2, 1"  x1="80"  y1="80"   y2="80"/>
  <line class="green" stroke-width="2" stroke-dasharray="1, 1, 2, 1"  x1="80"  x2="80" y2="80"/>
</svg>



<!--  SAMPLE LINES
DOC: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray


<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <line stroke-dasharray="5, 5"              x1="10" y1="10" x2="190" y2="10" />
    <line stroke-dasharray="5, 10"             x1="10" y1="30" x2="190" y2="30" />
    <line stroke-dasharray="10, 5"             x1="10" y1="50" x2="190" y2="50" />
    <line stroke-dasharray="5, 1"              x1="10" y1="70" x2="190" y2="70" />
    <line stroke-dasharray="1, 5"              x1="10" y1="90" x2="190" y2="90" />
    <line stroke-dasharray="0.9"               x1="10" y1="110" x2="190" y2="110" />
    <line stroke-dasharray="15, 10, 5"         x1="10" y1="130" x2="190" y2="130" />
    <line stroke-dasharray="15, 10, 5, 10"     x1="10" y1="150" x2="190" y2="150" />
    <line stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" />
    <line stroke-dasharray="5, 5, 1, 5"        x1="10" y1="190" x2="190" y2="190" />
</svg>
-->

CSS

/*line{
    stroke: #ff6600;
    stroke-width: 4.5;
}*/
.red{
  stroke:red;
}
.green{
  stroke:green;
}

JavaScript

function lineclick() {
	alert("CLICKED");
}