JSFiddle - React, Tailwind, and code Playground

by jxnx888

HTML

<div class="testimonial-section">
	
	</div>

CSS

body {

   background-color:black;


}
.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
          animation: fa-spin 2s infinite linear; }

.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
          animation: fa-spin 1s infinite steps(8); }

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

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

.testimonial-section{
	position: relative;
 z-index:999
}

.testimonial-section:before{
	position: absolute;
	left: 0px;
	top: 50%;
	background-image: url(http://t.commonsupport.com/adro/images/icons/ring-circle.png);
	background-repeat: no-repeat;
	background-position: center;
  background-size: 300px 300px ;
	width: 100%;
	height:100%;
	content: "";
	-webkit-animation: fa-spin 25s infinite alternate;
	-moz-animation: fa-spin 25s infinite alternate;
	-ms-animation: fa-spin 25s infinite alternate;
	-o-animation: fa-spin 25s infinite alternate;
	animation: fa-spin 25s infinite alternate;
}