JSFiddle - React, Tailwind, and code Playground

by davorpeic

HTML

<svg width="600px" height="600px" >
  <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" fill="#f00" />
    </marker>
  </defs>

  <line x1="50%" y1="0%" x2="95" y2="75" stroke="#000" stroke-width="2" marker-end="url(#arrow)" />
</svg>

CSS

svg {
  border: solid 1px #eaeaea;
  transform: scaleY(-1);
}