JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" version="1.1" x="0px" y="0px" width="300px" height="300px" viewBox="-7.725 -8.634 300 300" enable-background="new -7.725 -8.634 300 300" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<defs>
</defs>
<rect x="41.759" y="41.759" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -58.3487 140.8662)" fill="none" stroke="#000000" width="198.215" height="198.215"/>
<rect x="41.759" y="41.759" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -58.3487 140.8662)" fill="none" width="198.215" height="198.215"/>
<text transform="matrix(1 0 0 1 111.2188 38.0269)"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="12" letter-spacing="6">Lore</tspan><tspan x="49.287" y="0" font-family="'MyriadPro-Regular'" font-size="12">m </tspan><tspan x="-14.398" y="14.4" font-family="'MyriadPro-Regular'" font-size="12">ipsum</tspan><tspan x="16.609" y="14.4" font-family="'MyriadPro-Regular'" font-size="12" letter-spacing="6"> </tspan><tspan x="26.036" y="14.4" font-family="'MyriadPro-Regular'" font-size="12">dolor</tspan><tspan x="52.735" y="14.4" font-family="'MyriadPro-Regular'" font-size="12" letter-spacing="6"> </tspan><tspan x="62.163" y="14.4" font-family="'MyriadPro-Regular'" font-size="12">sit </tspan><tspan x="-28.799" y="28.8" font-family="'MyriadPro-Regular'" font-size="12">amet,</tspan><tspan x="-0.541" y="28.8" font-family="'MyriadPro-Regular'" font-size="12" letter-spacing="1"> </tspan><tspan x="3.745" y="28.8" font-family="'MyriadPro-Regular'" font-size="12">scripta</tspan><tspan x="37.188" y="28.8" font-family="'MyriadPro-Regular'" font-size="12" letter-spacing="1"> </tspan><tspan x="41.475" y="28.8" font-family="'MyriadPro-Regular'" font-size="12">luptatum </tspan><tspan x="-43.199" y="43.2" font-family="'MyriadPro-Regular'" font-size="12">posidonium</tspan><tspan x="17.22" y="43.2"...