JSFiddle - React, Tailwind, and code Playground

by mblase75

HTML

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet">

<link href="//netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">

<i id='iconRepeatMain' class='icon-repeat' style='font-size:36px; color:red'></i>

CSS

i.icon-repeat {
    -webkit-animation: Rotate 500ms infinite linear;
    -moz-animation: Rotate 500ms infinite linear;
    -ms-animation: Rotate 500ms infinite linear;
    -o-animation: Rotate 500ms infinite linear;
    animation: Rotate 500ms infinite linear;
}
@-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);}
}
#iconRepeatMain{
    display: inline-block;    
    position: absolute;
    z-index:10007;
    left: 50%;
    top: 50%;
    width:26px;
    height:19px;
    margin-left: -24px; /* -1 * image width / 2 */
    margin-top: -24px;  /* -1 * image height / 2 */
    font-size:36px;
}