JSFiddle - React, Tailwind, and code Playground

HTML

My SVG:

<br><br>

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve" width="24" height="24" fill="#9199ac">
                           <style type="text/css">
                              .st0{display:none;}
                              .st1{display:inline;}
                              .st2{fill:#080808;}
                              .st3{display:inline;fill:none;}
                              .st4{display:inline;fill:#FFFFFF;}
                              .st5{display:inline;fill:#FEFEFE;}
                              .st6{display:inline;fill:#FDFDFD;}
                              .st7{fill:#FEFEFE;}
                              .st8{fill:#FFFFFF;}
                              .st9{fill:#F9F9F9;}
                           </style>
                           <g id="Layer_1" class="st0">
                              <g id="XMLID_68_" class="st1">
                                 <path id="XMLID_99_" class="st2" d="M212.8,9.5c6.1,0.7,12.2,1.2,18.3,2.1c7.2,1.1,14.6,1.8,21.5,4.1c16.6,5.5,30.2,15.6,40,30.1
                                    c6.1,9,10.5,19,12.2,30c0.8,5.5,1.4,11,1.4,16.6c0.1,32.8,0,65.6,0,98.4c0,27.7,0.1,55.4,0.1,83.1c0,13.4,0,26.8-0.2,40.1
                                    c-0.1,10-2.6,19.6-6.7,28.8c-6.8,15.1-17.2,26.9-31.6,35.7c-11,6.7-22.9,9.2-35.2,10.5c-13.4,1.4-26.9,2.4-40.4,2
                                    c-13.3-0.5-26.6-2.4-39.7-4.7c-16.8-3-30-12.5-40.7-25.5c-11.9-14.4-17.7-31.1-17.8-49.7c-0.1-30.4-0.1-60.9-0.1-91.3
                                    c0-34.4-0.1-68.7-0.1-103.1c0-10.7-0.2-21.3,0.3-32c0.6-11.8,4.1-22.9,10-33.2c8.7-15.3,21-26.2,37.3-33.3
                                    c10.6-4.6,21.8-5.5,32.9-7.2c4.3-0.7,8.6-1,12.9-1.4C195.7,9.5,204.3,9.5,212.8,9.5z M109,200.4c0,34.7,0.1,69.4-0.1,104.1
                                   ...