JSFiddle - React, Tailwind, and code Playground

by kevindivdbyzero

HTML

<div class="outer">
<svg version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" preserveAspectRatio="xMinYMin" style="overflow: hidden; position: relative; left: -0.5px;" class="stretchBar">
<defs
     id="defs3065"><clipPath
   id="SVGID_5_">
  <use
     id="use3018"
     style="overflow:visible"
     x="0"
     y="0"
     width="1"
     height="1"
     xlink:href="#SVGID_4_" />
</clipPath>
<clipPath
   id="SVGID_5_-7">
  <use
     id="use3018-6"
     style="overflow:visible"
     x="0"
     y="0"
     width="1"
     height="1"
     xlink:href="#SVGID_4_" />
</clipPath>
<clipPath
   id="SVGID_5_-1">
  <use
     id="use3018-4"
     style="overflow:visible"
     x="0"
     y="0"
     width="1"
     height="1"
     xlink:href="#SVGID_4_" />
</clipPath>
<clipPath
   id="SVGID_5_-12">
  <use
     id="use3018-3"
     style="overflow:visible"
     x="0"
     y="0"
     width="1"
     height="1"
     xlink:href="#SVGID_4_" />
</clipPath>
<clipPath
   id="SVGID_5_-3">
  <use
     id="use3018-41"
     style="overflow:visible"
     x="0"
     y="0"
     width="1"
     height="1"
     xlink:href="#SVGID_4_" />
</clipPath>
<clipPath
   id="SVGID_5_-0">
  <use
     id="use3018-2"
     style="overflow:visible"
     x="0"
     y="0"
     width="1"
     height="1"
     xlink:href="#SVGID_4_" />
</clipPath>
<clipPath
   id="SVGID_5_-8">
  <use
     id="use3018-65"
     style="overflow:visible"
     x="0"
     y="0"
     width="1"
     height="1"
     xlink:href="#SVGID_4_" />
</clipPath>
<clipPath
   id="SVGID_5_-06">
  <use
     id="use3018-1"
     style="overflow:visible"
     x="0"
     y="0"
     width="1"
     height="1"
     xlink:href="#SVGID_4_" />
</clipPath>
<clipPath
   id="SVGID_5_-82">
  <use
     id="use3018-9"
     style="overflow:visible"
     x="0"
     y="0"
     width="1"
     height="1"
     xlink:href="#SVGID_4_" />
</clipPath>

	<defs
   id="defs3508">
		<path
   d="m 23.589,42.098 c 10.277,0 18.616,-8.373 18.616,-18.645...

CSS

.outer{
    
    width:50%;
    height:50%;
}

.adaptive-svg
{
    width: 100%;
    min-width: 250px;
    height: auto;
}