JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>
  <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_2">
   <stop stop-color="#000000" offset="0"/>
   <stop stop-color="#ffffff" offset="1"/>
  </linearGradient>
  <linearGradient y2="1" x2="0" y1="0" x1="1" id="svg_3">
   <stop stop-color="#000000" offset="0"/>
   <stop stop-color="#ffffff" offset="1"/>
  </linearGradient>
  <linearGradient y2="1" x2="0" y1="0" x1="1" id="svg_4">
   <stop stop-color="#000000" offset="0"/>
   <stop stop-color="#c6c6c6" offset="1"/>
  </linearGradient>
  <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_5">
   <stop stop-color="#13470c" offset="0"/>
   <stop stop-color="#ffff00" offset="1"/>
  </linearGradient>
  <linearGradient y2="1" x2="0" y1="0" x1="1" id="svg_6">
   <stop stop-color="#13470c" offset="0"/>
   <stop stop-color="#ffff00" offset="1"/>
  </linearGradient>
  <linearGradient y2="0" x2="1" y1="1" x1="0" id="svg_8">
   <stop stop-color="#000000" offset="0"/>
   <stop stop-color="#ffffff" offset="1"/>
  </linearGradient>
  <linearGradient y2="0" x2="1" y1="1" x1="0" id="svg_9">
   <stop stop-color="#2d2d2d" offset="0"/>
   <stop stop-color="#ffffff" offset="1"/>
  </linearGradient>
  <filter id="svg_11_blur">
   <feGaussianBlur stdDeviation="1" in="SourceGraphic"/>
  </filter>
  <filter id="svg_12_blur">
   <feGaussianBlur stdDeviation="1" in="SourceGraphic"/>
  </filter>
 </defs>
 <g>
  <title>Слой 1</title>
  <path filter="url(#svg_12_blur)" id="svg_12" stroke-opacity="0.99" d="m92.20741,80.14999c-4.92593,0 -8.89241,3.9664 -8.89241,8.8923l0,118.83849c0,4.9259 3.96648,8.89604 8.89241,8.89604l39.74147,0c-1.64343,1.87819 -2.55142,3.9185 -2.55142,6.06161c0,9.15715 16.46146,16.57161 36.7825,16.57161c20.32091,0 36.7822,-7.41446 36.7822,-16.57161c0,-2.14311 -0.90796,-4.18343 -2.55112,-6.06161l114.92337,0c4.92578,0 8.89227,-3.97014 8.89227,-8.89604l0,-118.83849c0,-4.9259...