JSFiddle - React, Tailwind, and code Playground

by Nechifor Vasile

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598 126" width="350">
    
      <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(278.68394,-43.393569)">
        <g id="g7694-4-0" transform="matrix(9.7551121,0,0,9.7551121,-238.60944,118.65003)"
          style="display:inline;fill:#210070;fill-opacity:1" inkscape:export-xdpi="95.652267"
          inkscape:export-ydpi="95.652267">
          <path
            style="fill:#ffffff;fill-opacity:1;stroke-width:3.77952774;stroke:#7ad9c4;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;paint-order:stroke markers fill"
            d="M 262.86523 0 C 259.20707 0 255.54906 0.9747576 252.13477 2.9257812 L 11.183594 163.88672 C -0.52254077 171.69081 -3.4486222 186.32316 4.3554688 198.0293 C 6.3065035 199.98033 9.2325701 199.97944 11.183594 199.00391 L 262.86523 31.216797 L 514.54883 199.00391 C 516.49997 199.97941 519.42596 199.98029 521.37695 198.0293 C 528.20556 186.32316 525.27946 170.7153 514.54883 163.88672 L 273.5957 2.9257812 C 270.18141 0.9747576 266.5234 0 262.86523 0 z M 62.886719 213.63672 C 52.156094 213.63672 43.376953 222.41586 43.376953 233.14648 L 43.376953 364.8418 C 43.376953 426.299 93.127829 477.02539 155.56055 477.02539 L 462.8457 477.02539 C 463.91374 477.02539 464.95587 476.91527 465.97852 476.74805 L 2260.875 476.74805 L 2260.875 446.89648 L 482.35547 446.89648 L 482.35547 233.14648 C 482.35547 222.41586 473.57634 213.63672 462.8457 213.63672 L 62.886719 213.63672 z M 72.640625 242.90234 L 453.08984 242.90234 L 453.08984 447.75977 L 155.56055 447.75977 C 109.71152 447.75977 72.640625 410.69084 72.640625 364.8418 L 72.640625 242.90234 z "
            transform="matrix(0.02712253,0,0,0.02712253,-4.1080512,-7.7145665)" id="path7692-5-8" />
        </g>
        <g class="flip-animation flip-animation-a"
          aria-label="Real"
         ...

CSS

.flip-animation {
    -webkit-animation-timing-function: linear; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 10s; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite; 
    animation-duration: 10s; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    transform-style: preserve-3d;
  /*   transform-origin: -100% 50%;
    -webkit-transform-origin: -100% 50%;
    -moz-transform-origin: -100% 50%;
    -ms-transform-origin: -100% 50%; */
  }
  
  .flip-animation-a {
    -webkit-animation-name: flip-animation-a;
    animation-name: flip-animation-a;
  }
  
  .flip-animation-b {
    -webkit-animation-name: flip-animation-b;
    animation-name: flip-animation-b;
  }
  
  @keyframes flip-animation-a {
        
     16.6% {
          -webkit-transform: rotateY(0deg); 
          -moz-transform: rotateY(0deg); 
          -ms-transform: rotateY(0deg); 
          transform: rotateY(0deg); 
      }
  
      33% {
          -webkit-transform: rotateY(-90deg); 
          -moz-transform: rotateY(-90deg); 
          -ms-transform: rotateY(-90deg); 
          transform: rotateY(-90deg); 
          /* transform-origin: center; */
      }
      
   83% { 
          -webkit-transform: rotateY(-90deg); 
          -moz-transform: rotateY(-90deg); 
          -ms-transform: rotateY(-90deg); 
          transform: rotateY(-90deg); 
      }
      
    100% { 
          -webkit-transform: rotateY(0deg); 
          -moz-transform: rotateY(0deg); 
          -ms-transform: rotateY(0deg); 
          transform: rotateY(0deg); 
          /* transform-origin: center; */
      }
      
      
  }
  
  @keyframes flip-animation-b { 
  
     0% { 
          -webkit-transform: rotateY(-90deg); 
          -moz-transform: rotateY(-90deg); 
          -ms-transform: rotateY(-90deg); 
          transform: rotateY(-90deg); 
      }
      
     
      33% { 
         ...