JSFiddle - React, Tailwind, and code Playground

HTML

<svg>
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" />
    </marker>
    <marker id="hover-arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" />
    </marker>
  </defs>
</svg>


<svg width="276px" height="100px" class="edge" style="left: 466px; top: 228px;">
  <line x1="64" y1="28" x2="200" y2="70" class="edge-out-dir">
  </line>
</svg>
<svg width="276px" height="100px" class="edge" style="left: 466px; top: 428px;">
  <line x1="64" y1="28" x2="200" y2="70" class="edge-out-dir">
  </line>
</svg>

CSS

#arrow {
              stroke: #000000;
              fill: #000000;
            }

            #hover-arrow {
              stroke: #98dfd9;
              fill: #98dfd9;
            }

            .edge {
              position: absolute;
              stroke: #000;
              marker: #000;
              fill: #000;
            }

            .edge-out-dir {
              stroke-width: 1;
              marker-end: url("#arrow")
            }

            .edge:hover {
              stroke: #98dfd9;
            }

            .edge:hover .edge-out-dir {
              marker-end: url("#hover-arrow")
            }