JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="500" height="400">
    <defs>
        <pattern id="pattern-stripe" 
          width="4" height="4" 
          patternUnits="userSpaceOnUse">
          <g>
              <path d="M0,0 l0,4" stroke="purple" stroke-width="1" />
              <rect width=4 height=4 fill="purple" fill-opacity="0.7" stroke-width="0" />
          </g>
        </pattern>
        <pattern id="pattern-stripe-1" 
          width="4" height="4" 
          patternUnits="userSpaceOnUse">
          <g>
              <path d="M0,0 l4,0" stroke="purple" stroke-width="1" />
              <rect width=4 height=4 fill="purple" fill-opacity="0.7" stroke-width="0" />
          </g>
        </pattern>
        <pattern id="pattern-stripe-2" 
          width="4" height="4" 
          patternUnits="userSpaceOnUse">
          <g>
              <path d="M4,0 l-4,4" stroke="purple" stroke-width="1" />
              <rect width=4 height=4 fill="purple" fill-opacity="0.7" stroke-width="0" />
          </g>
        </pattern>
        <pattern id="pattern-stripe-3" 
          width="4" height="4" 
          patternUnits="userSpaceOnUse">
          <g>
              <path d="M0,0 l4,4" stroke="purple" stroke-width="1" />
              <rect width=4 height=4 fill="purple" fill-opacity="0.7" stroke-width="0" />
          </g>
        </pattern>
        <pattern id="pattern-stripe-4" 
          width="4" height="4" 
          patternUnits="userSpaceOnUse">
          <g>
              <path d="M0,0 l4,4" stroke="purple" stroke-width="1" />
              <path d="M4,0 l-4,4" stroke="purple" stroke-width="1" />
              <rect width=4 height=4 fill="purple" fill-opacity="0.7" stroke-width="0" />
          </g>
        </pattern>
        <pattern id="pattern-stripe-5" 
          width="4" height="4" 
          patternUnits="userSpaceOnUse">
          <g>
              <path d="M0,0 l0,4" stroke="purple" stroke-dasharray="3,1" stroke-width="2" />
              <rect width=4 height=4 fill="purple"...