JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class="parent">




</div>

SCSS

body {
  background: #000;
}

.parent {
  position: relative;
  width: 500px;
  height: 500px;
  border: 2px solid red;
}

.child {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  animation: play1 15s linear infinite;
  &:before {
    content: '';
    display: block;
    position: absolute;
    top: 30%;
    left: 30%;
    width: 70%;
    height: 70%;
    background: green;
    border-radius: 50%;
  }
}



@keyframes play1 {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(120deg) scale(1.3); }
  75%  { transform: rotate(240deg) scale(.7); }
  100% { transform: rotate(359deg) scale(1); }
}

JavaScript

var t = "";

for (var i=0;i<10;i++) {
	t += "<div class="child"></div>";
}

$('.parent').html(t);