JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" id="svg-6" preserveAspectRatio="xMinYMin" stroke-linecap="round" stroke-linejoin="round" fill-rule="evenodd" xml:space="preserve" viewBox="-10 -131.25 224 137.5" cs:drawingunits="unitless" cs:drawingscale="1"  xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" zoomAndPan="magnify" width="1150" height="767">
<g id="_10" cs:objtype="layer" cs:id="0" cs:layerisoff="false" cs:layerisfrozen="false" cs:layerislocked="false" cs:layerisinuse="true" cs:linecolor="rgb(255,255,255)" cs:lineweight="Default" cs:linestyle="Continuous">
<g id="_AAF" cs:objtype="attributes" cs:blockname="" style="stroke-width:0;fill:currentColor;stroke:rgb(0,30,-10);" cs:linecolor="rgb(0,0,0)" cs:lineweight="0.025" cs:linestyle="HIDDEN" cs:linestylescale="1" cs:attributedisplaymode="1" cs:attributefontname="Arial" cs:attributetextsize="1.39736364">
<text transform="matrix( 0 0 2 131.715 -117.976)" cs:attributeinsert="131.715,-117.976,0" cs:attributetag="ELR" font-size="1.39736364" style="font-family: arial" attribvalue="ECM1" startOffset="0">ECM1</text>
</g>
<g id="_E2C" cs:objtype="text" cs:blockname="Table" style="stroke-width:0;fill:currentColor;stroke:rgb(0,0,0);" cs:linecolor="rgb(0,0,0)" cs:lineweight="0.025" cs:linestyle="Continuous" cs:linestylescale="1">
<text transform="matrix(2 0 0 2 41.9656 -114.49)" font-size="1.39736364" style="font-family: arial" startOffset="0">Mileage</text>
</g>
<g id="_E2D" cs:objtype="polyline" cs:blockname="Table" style="stroke-width:0.02069039;fill:none;stroke:rgb(0,0,0);" cs:linecolor="rgb(0,0,0)" cs:lineweight="0.1" cs:linestyle="Continuous" cs:linestylescale="1">
<polyline points="0.00352003235,-125.00274 200.00352,-125.00274 "></polyline>
<polyline points="200.00352,-125.00274 200.00352,-0.00273973779 "></polyline>
<polyline points="200.00352,-0.00273973779 0.00352003235,-0.00273973779 "></polyline>
<polyline points="0.00352003235,-0.00273973779 0.00352003235,-125.00274 "></polyline>
</g>
<g id="_E2E"...