JSFiddle - React, Tailwind, and code Playground

by Ishank Dubey

HTML

<svg width="500px" height="900px" viewBox="0 0 500 900" style="background-color:red">
<g id='arrow-pair' fill="white" stroke="green" stroke-width="5" style='fill: green;'>
<rect x='100' y='20' width="300" height="100" style="fill:none;stroke-width:2;stroke:rgb(0,0,0)" />

<polyline
    style="stroke-linejoin: miter;
    stroke: black; stroke-width: 2;"
    points="240 120, 240 200, 230 200, 250 210, 270 200, 260 200, 260 120"/>
    </g>
    
    <use xlink:href="#arrow-pair" transform="translate(0, 190)" fill="blue" />
</svg>

CSS

circle {
fill: #cfc;
stroke: blue;
stroke-width: 2;
stroke-dasharray: 5 3
}