JSFiddle - React, Tailwind, and code Playground

by albanlopez

HTML

<span><svg height="60">
    <defs id="defs06661c99994c90379769e3f4985fdc24">
    <marker id="arrowhead06661c99994c90379769e3f4985fdc24" refX="2" refY="0" viewBox="-25 -25 60 50" markerUnits="strokeWidth" markerWidth="6" markerHeight="12" orient="auto">
        <polygon stroke="#1f77b4" points="0,0 -2.5,-2.5 5,0 -2.5,2.5"></polygon>
    </marker>
    <marker id="arrowheadHover06661c99994c90379769e3f4985fdc24" refX="2" refY="0" viewBox="-5 -5 12 10" markerUnits="strokeWidth" markerWidth="16" markerHeight="12" orient="auto">
        <polygon stroke="#aec7e8" points="0,0 -2.5,-2.5 5,0 -2.5,2.5"></polygon>
    </marker>
</defs>
    <g class="arrow" marker-end="url(#arrowhead06661c99994c90379769e3f4985fdc24)">
        <line class="hair" stroke="#1f77b4" x1="1" y1="1" x2="150" y2="50" display="inline"></line>
        <line class="hair2"x1="1" y1="1" x2="150" y2="50" stroke="#1f77b4" display="inline"></line>
    </g>
    <g class="arrow" marker-end="url(#arrowhead06661c99994c90379769e3f4985fdc24)">
        <line class="hair" stroke="#1f77b4" x1="1" y1="1" x2="150" y2="20" display="inline"></line>
        <line class="hair2"x1="1" y1="1" x2="150" y2="20" stroke="#1f77b4" display="inline"></line>
    </g>
    </svg>
</span>

<span>
<svg height="60">
    <defs id="defs06661">
    <marker id="arrowhead06661" refX="2" refY="0" viewBox="-25 -25 60 50" markerUnits="strokeWidth" markerWidth="6" markerHeight="12" orient="auto">
        <polygon stroke="#f48" points="0,0 -2.5,-2.5 5,0 -2.5,2.5"></polygon>
    </marker>
    <marker id="arrowheadHover06661" refX="2" refY="0" viewBox="-5 -5 12 10" markerUnits="strokeWidth" markerWidth="16" markerHeight="12" orient="auto">
        <polygon stroke="#f48" points="0,0 -2.5,-2.5 5,0 -2.5,2.5"></polygon>
    </marker>
</defs>
<g class="arrow" marker-end="url(#arrowhead06661)">
    <line class="hair" stroke="#f36" x1="1" y1="1" x2="150" y2="50" display="inline"></line>
    <line class="hair2" x1="1" y1="1" x2="150" y2="50" stroke="#f36"...

CSS

.arrow:hover>.hair {
        /*stroke: #E6550D;*/
        stroke-width: 2px;
        /* marker-end:url(#defs06661+marker+marker); */
    }
    /*Blue:#1F77B4 #3182bd #6baed6*/
    /*Red:#E6550D*/
    .hair {
        fill: none;
        /*stroke: #3182bd;*/
    }
    .arrow {
        fill: none;
        /* marker-end:url(#arrowhead06661c99994c90379769e3f4985fdc24); */
    }
    .hair2 {
        fill: none;
        stroke: #3182bd;
        stroke-width: 15px;
        stroke-opacity: 0.1;
        /*marker-end:url(#arrowhead);*/
    }