JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">

<defs>
  <style type="text/css"><![CDATA[
    @-ms-keyframes spin {
      from { -ms-transform: rotate(0deg); }
      to { -ms-transform: rotate(360deg); }
    }
    @-moz-keyframes spin {
      from { -moz-transform: rotate(0deg); }
      to { -moz-transform: rotate(360deg); }
    }
    @-webkit-keyframes spin {
      from { -webkit-transform: rotate(0deg); }
      to { -webkit-transform: rotate(360deg); }
    }
    @keyframes spin {
      from {
        transform:rotate(0deg);
      }
      to {
        transform:rotate(360deg);
      }
    }

    .throbber {
      -webkit-animation-name: spin;
      -webkit-animation-duration: 2000ms;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      -webkit-transform-origin: 10px 10px;
      -moz-animation-name: spin;
      -moz-animation-duration: 2000ms;
      -moz-animation-iteration-count: infinite;
      -moz-animation-timing-function: linear;
      -moz-transform-origin: 10px 10px;
      -ms-animation-name: spin;
      -ms-animation-duration: 2000ms;
      -ms-animation-iteration-count: infinite;
      -ms-animation-timing-function: linear;
      -ms-transform-origin: 10px 10px;
      animation-name: spin;
      animation-duration: 2000ms;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      transform-origin: 10px 10px;
    }
  ]]></style>
</defs>

  <g class="throbber">
   <path class="arrow-1" fill="#40B6FF" d="M17.793,4.108L14.24,3.219c-0.647-0.162-1.288,0.24-1.424,0.893l-0.748,3.585
   c-0.136,0.653,0.215,0.897,0.78,0.543l1.656-1.038L14.6,7.171c0.704,1.161,0.983,2.576,0.641,3.997
   c-0.607,2.504-2.897,4.154-5.372,4.049c-0.569-0.024-0.62,0.463-0.62,0.463l-0.3,1.241c0,0-0.198,0.471,0.47,0.527
  ...