JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <span class="">
    <i class="fa fa-cog cog3 gly-spin1" aria-hidden="true"></i>
      <span class="btn btn-jam2 gly-spin2">
      <i class="fa fa-cog cog4" aria-hidden="true"></i>
     </span>
    </span>
  </div>
</div>

CSS

.cog3 {
  font-size: 25px;
  height: 22px;
  width: 22px;
  line-height: 22.5px;
  text-indent: 0.25px;
}

.cog4 {
  font-size: 25px;
  height: 21.75px;
  width: 21.75px;
  text-indent: 0;
  line-height: 22.5px;
}


.btn-jam2 {
  top: 4px;
  left: -7px;
  position: relative;
  padding: 0;
  margin: 0;
  line-height: 6px;
}

.gly-spin1 {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}

.gly-spin2 {
  -webkit-animation: spin 2s infinite linear reverse;
  -moz-animation: spin 2s infinite linear reverse;
  -o-animation: spin 2s infinite linear reverse;
  animation: spin 2s infinite linear reverse;
}

@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
  }
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
  }
}

@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(359deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}