JSFiddle - React, Tailwind, and code Playground
by prozoroff
HTML
<svg height=300 width=1000>
<defs>
<clipPath id="_jsc744"><path fill="none" d="M0.04101599999999905 0.25687500000000085 h540 v248.99999999999997 h-540 Z"></path></clipPath>
</defs>
<g clip-path="url(#_jsc744)">
<g>
<rect fill="rgba(0,0,0,0)" width="540" height="247.99999999999997" x="0.541015999999999" y="0.7400000000000002" rx="0" ry="0"></rect>
</g>
<g transform="translate(0.5,0.5)">
<path d="M5.041016000000003 0.2400000000000002 L 5.041016000000003 248.24M58.041016 0.2400000000000002 L 58.041016 248.24" fill="none" stroke-width="0" stroke-linejoin="bevel" stroke-linecap="butt" z-index="5"></path>
<path d="M58.041016 0.2400000000000002 L 58.041016 248.24M111.04101599999998 0.2400000000000002 L 111.04101599999998 248.24" fill="none" stroke-width="0" stroke-linejoin="bevel" stroke-linecap="butt" z-index="5"></path>
<path d="M111.04101599999998 0.2400000000000002 L 111.04101599999998 248.24M164.041016 0.2400000000000002 L 164.041016 248.24" fill="none" stroke-width="0" stroke-linejoin="bevel" stroke-linecap="butt" z-index="5"></path>
<path d="M164.041016 0.2400000000000002 L 164.041016 248.24M217.041016 0.2400000000000002 L 217.041016 248.24" fill="none" stroke-width="0" stroke-linejoin="bevel" stroke-linecap="butt" z-index="5"></path>
<path d="M217.041016 0.2400000000000002 L 217.041016 248.24M270.041016 0.2400000000000002 L 270.041016 248.24" fill="none" stroke-width="0" stroke-linejoin="bevel" stroke-linecap="butt" z-index="5"></path>
<path d="M270.041016 0.2400000000000002 L 270.041016 248.24M323.041016 0.2400000000000002 L 323.041016 248.24" fill="none" stroke-width="0" stroke-linejoin="bevel" stroke-linecap="butt" z-index="5"></path>
<path d="M323.041016 0.2400000000000002 L 323.041016 248.24M376.041016 0.2400000000000002 L 376.041016 248.24" fill="none" stroke-width="0" stroke-linejoin="bevel" stroke-linecap="butt" z-index="5"></path>
<path d="M376.041016 0.2400000000000002 L 376.041016...