JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

/* WebKit and Opera browsers */

@-webkit-keyframes spinner {
  from {
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(-360deg);
  }
}


/* all other browsers */

@keyframes spinner {
  from {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}

#spinner,
#spinner2 {
  -webkit-animation-name: spinner;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 5s;
  animation-name: spinner;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

#spinner {
  display: inline-block;
}

#spinner:hover,
#spinner2:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}