JSFiddle - React, Tailwind, and code Playground

HTML

<div id="svg_arrow" style="display:none">
<span class="svg_arrow_border">
            <svg height="36" width="15" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <desc/>
                <defs/>
                <path d="M0,36 L0,0 L15,18Z" fill="red"/>
            </svg>
</span>
<span class="svg_arrow_inner">
            <svg height="36" width="15" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <desc/>
                <defs>
                        <pattern patternUnits="userSpaceOnUse" width="100" height="100" id="svg_breadcrumb_arrow_bk">
                            <image xlink:href="http://www.lesatirique.info/brume_haiwaii60.png" width="100" height="100" opacity="1" y="0" x="0"/>
                        </pattern>
                </defs>
                <path d="M0,36 L0,0 L15,18Z" fill="black" class="layer_color"/>
                <path d="M0,36 L0,0 L15,18Z" class="layer_background" fill="url(#svg_breadcrumb_arrow_bk)"/>

            </svg>
</span>
</div>

<div id="test" class="test">
    <span class="arrow item1"></span>
    <span class="arrow item2"></span>
    <span class="arrow item3"></span>
    <span class="arrow item4"></span>
</div>

<div id="test2" class="test">
    <span class="arrow item1"></span>
    <span class="arrow item2"></span>
    <span class="arrow item3"></span>
    <span class="arrow item4"></span>
</div>

CSS

.svg_arrow_border {
    display: block;
    position:absolute;
    top:0;
    left:1px;    
    z-index: 50;
}

.svg_arrow_border path {
    stroke: none;
}

.svg_arrow_inner {
    position:absolute;
    top:0;
    left:0;
    display: block;
    z-index: 51;
}
.svg_arrow_inner path.layer_color {
    fill-opacity: 1;
    stroke: none;
}
.svg_arrow_inner path.layer_background {
    fill-opacity: 1;
    stroke: none;
}

#item2{
    display:block;
    position:relative;
    margin-left:30px;
}


.test .arrow{
    display:block;
    position:absolute;
}

.item2{
   left:30px;
}

.item3{
    left:60px;
}

.item4{
   left:90px;
}


#test2{
    display:block;
    position:relative;
    top: 50px;
}

JavaScript

$('.test span').each(function() {
                $(this).append($('#svg_arrow').unwrap().html());
            });