JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="outline">
    <feMorphology operator="dilate" in="SourceAlpha" radius="5" result="f1"/>
    <feConvolveMatrix in='f1' order="3 3" targetX="1" targetY="1" edgeMode="duplicate" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1" result="f2"/>
    <feMerge>
        <feMergeNode in="f2"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>
<g filter="url(#outline)" fill="#007700" stroke="#00FF00" stroke-width="2">
    <rect x="10" y="20" height="60" width="60"/>
    <rect x="70" y="80" height="50" width="75"/>
    <rect x="50" y="40" height="10" width="200"/>
    <rect x="110" y="10" height="50" width="75"/>
    <rect x="20" y="110" height="10" width="200"/>
</g>  
</svg>