JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="960px" height="560px" viewBox="0 0 960 560">
    <rect x="153" y="47" style="fill:none;stroke:#000000;stroke-width:10;stroke-miterlimit:10;stroke-dasharray:24,8;" width="276" height="148" />
    
    <polyline style="fill:none;stroke:#000000;stroke-width:10;stroke-miterlimit:10;" points="429,355 429,367 417,367 		" />
    <line style="fill:none;stroke:#000000;stroke-width:10;stroke-miterlimit:10;stroke-dasharray:23,8;" x1="409" y1="367" x2="169" y2="367" />
    <polyline style="fill:none;stroke:#000000;stroke-width:10;stroke-miterlimit:10;" points="165,367 153,367 153,355 		" />
    <line style="fill:none;stroke:#000000;stroke-width:10;stroke-miterlimit:10;stroke-dasharray:22,7;" x1="153" y1="348" x2="153" y2="235" />
    <polyline style="fill:none;stroke:#000000;stroke-width:10;stroke-miterlimit:10;" points="153,231 153,219 165,219 		" />
    <line style="fill:none;stroke:#000000;stroke-width:10;stroke-miterlimit:10;stroke-dasharray:23,8;" x1="173" y1="219" x2="413" y2="219" />
    <polyline style="fill:none;stroke:#000000;stroke-width:10;stroke-miterlimit:10;" points="417,219 429,219 429,231 		" />
    <line style="fill:none;stroke:#000000;stroke-width:10;stroke-miterlimit:10;stroke-dasharray:22,7;" x1="429" y1="238" x2="429" y2="351" />
</svg>