JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<div class="circ_wrap">
  <div class="gods_logo pulse"></div>
  <div class="circ_circ"></div>
</div>

SCSS

.circ_wrap {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 20px auto;
  overflow: hidden;
 
 .gods_logo {
   position: absolute;
   width: 200px;
   margin-left: auto;
   margin-right: auto;
   left: 0;
   right: 0;
   top: 77px;
   content: url(http://galnova.com/A20/gods-v-logo.png);
 }
 
  .circ_circ {
    width: 100%;
    height: 100%;
    content: url(http://galnova.com/A20/circ-circ.png);
    -webkit-animation: spinn 20s infinite linear;
  }

}

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

.pulse {
  cursor: pointer;
  box-shadow: 0 0 0 rgba(204,169,44, 0.4);
  animation: pulse 2s infinite;
}
.pulse:hover {
  animation: none;
}

/* -------------------------- */