JSFiddle - React, Tailwind, and code Playground
HTML
<svg height="750" width="640" style="overflow: visible" baseProfile="full" version="1.1" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><pattern patternUnits="userSpaceOnUse" height="24" width="50" id="black_h"><image height="24px" width="50px" xlink:href="http://doku.lwlcom.com/img/svg/black_h.png"/></pattern><pattern patternUnits="userSpaceOnUse" height="50" width="24" id="black_v"><image height="50px" width="24px" xlink:href="http://doku.lwlcom.com/img/svg/black_v.png"/></pattern><pattern patternUnits="userSpaceOnUse" height="24" width="50" id="green_h"><image height="24px" width="50px" xlink:href="http://doku.lwlcom.com/img/svg/green_h.png"/></pattern><pattern patternUnits="userSpaceOnUse" height="50" width="24" id="green_v"><image height="50px" width="24px" xlink:href="http://doku.lwlcom.com/img/svg/green_v.png"/></pattern><pattern patternUnits="userSpaceOnUse" height="24" width="50" id="red_h"><image height="24px" width="50px" xlink:href="http://doku.lwlcom.com/img/svg/red_h.png"/></pattern><pattern patternUnits="userSpaceOnUse" height="50" width="24" id="red_v"><image height="50px" width="24px" xlink:href="http://doku.lwlcom.com/img/svg/red_v.png"/></pattern><pattern patternUnits="userSpaceOnUse" height="24" width="50" id="yellow_h"><image height="24px" width="50px" xlink:href="http://doku.lwlcom.com/img/svg/yellow_h.png"/></pattern><pattern patternUnits="userSpaceOnUse" height="50" width="24" id="yellow_v"><image height="50px" width="24px" xlink:href="http://doku.lwlcom.com/img/svg/yellow_v.png"/></pattern></defs><line stroke-width="3" stroke="#e8e8e8" y2="374" x2="160" y1="374" x1="0"/><line stroke-width="3" stroke="#e8e8e8" y2="215" x2="319" y1="0" x1="319"/><line stroke-width="3" stroke="#e8e8e8" y2="374" x2="480" y1="374" x1="640"/><text style="text-anchor: middle" fill="#FFFFFF" width="100" y="365" x="40" referencetype="manhole" referenceid="3" direction="W"...