JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://use.fontawesome.com/8dcbba1498.js"></script>
<p>Updated</p>

<div class="button-container">
  <i class="fa fa-play button-icon"></i>
  <div class="button-border"></div>
</div>

CSS

.button-border {
    width: 100px;
    height: 100px;
    background: transparent;
    border-radius: 50%;
    border: 2px dashed #000;
 -webkit-animation-name: Rotate;
 -webkit-animation-duration: 2s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
 -moz-animation-name: Rotate;
 -moz-animation-duration: 2s;
 -moz-animation-iteration-count: infinite;
 -moz-animation-timing-function: linear;
 -ms-animation-name: Rotate;
 -ms-animation-duration: 2s;
 -ms-animation-iteration-count: infinite;
 -ms-animation-timing-function: linear;
}

@-webkit-keyframes Rotate
{
 from{-webkit-transform:rotate(0deg);}
 to{-webkit-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);}
}

.button-container{
  position:relative;
  width:100px;
  height:100px;
}

.button-icon{
  position:absolute;
  left:50%;
  top:50%;
  right:0;
  bottom:0;
  margin-left:-5px;
  margin-top:-5px;
}