JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://leaverou.github.io/prefixfree/prefixfree.js"></script>
<!-- Forked from http://codepen.io/amos/pen/ywJdK to compare Codepen with jsFiddle -->
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>
<div class="wip"></div>

SCSS

body{
  background: #111;
}
@for $i from 0 through 50{ 
  .wip:nth-child(#{$i}){
    position: absolute;
    top: 30%;
    left: 45%;
    transform-origin: center 90px;
    transform: rotate($i*7.2deg) rotateY(-50deg);
    
  &:nth-child(#{$i}):after{
    content:'';
    width: 50px;
    height: 1px;
    border-top: 5px dotted adjust-hue(red, $i*50%);
    display: block;
    animation: wip 5s linear infinite;
    animation-delay: $i*-.2s;
  }
}
@keyframes wip{
    0%{transform: rotate(1turn);
    }
  }
}