JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="spin2" style="text-align: center;">text</a>
<div id="spin2" style="text-align: center;">text</div>

CSS

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotateY(0deg);    }
    50%  { -webkit-transform: rotateY(180deg); }
    to  { -webkit-transform: rotateY(360deg); } 
  }
 
  @keyframes spin2 {
    from {
      -moz-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
    50%  {
      -moz-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      transform: rotateY(180deg);
    }
    to  {
      -moz-transform: rotateY(360deg);
      -ms-transform: rotateY(360deg);
      transform: rotateY(360deg);
    }
 
  }
 
    #spin2 {
    -webkit-animation-name: spin2;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: ease-in-out; 
     -moz-animation-timing-function: ease-in-out;
     
    animation-name: spin2;
    animation-iteration-count: infinite;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
 
  #spin2:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }