JSFiddle - React, Tailwind, and code Playground

HTML

<div>F</div>

CSS

div {
    display:inline-block;
    animation:
        PreRotate 800ms ease-out 0ms 1,
        Rotate 500ms linear infinite 800ms;
    -webkit-animation:
        PreRotate 800ms ease-out 0ms 1,
        Rotate 500ms linear infinite 800ms;
    -moz-animation:
        PreRotate 800ms ease-out 0ms 1,
        Rotate 500ms linear infinite 800ms;
    -ms-animation:
        PreRotate 800ms ease-out 0ms 1,
        Rotate 500ms linear infinite 800ms;
    -o-animation:
        PreRotate 800ms ease-out 0ms 1,
        Rotate 500ms linear infinite 800ms;
}

@-o-keyframes Rotate {
  from {-o-transform:rotate(0deg);}
  to {-o-transform:rotate(360deg);}
}
@-moz-keyframes Rotate {
  from {-moz-transform:rotate(0deg);}
  to {-moz-transform:rotate(360deg);}
}
@-ms-keyframes Rotate {
  from {-ms-transform:rotate(0deg);}
  to {-ms-transform:rotate(360deg);}
}
@-webkit-keyframes Rotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}
@-keyframes Rotate {
  from { transform:rotate(0deg);}
  to { transform:rotate(360deg);}
}

@-o-keyframes PreRotate {
  from {-o-transform:rotate(0deg);}
  to {-o-transform:rotate(-360deg);}
}
@-moz-keyframes PreRotate {
  from {-moz-transform:rotate(0deg);}
  to {-moz-transform:rotate(-360deg);}
}
@-ms-keyframes PreRotate {
  from {-ms-transform:rotate(0deg);}
  to {-ms-transform:rotate(-360deg);}
}
@-webkit-keyframes PreRotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(-360deg);}
}
@-keyframes PreRotate {
  from { transform:rotate(0deg);}
  to { transform:rotate(-360deg);}
}