JSFiddle - React, Tailwind, and code Playground

by reine_rizmut

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenLite.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div class="box" id="red"></div>
<div class="box" id="yellow"></div>
<div class="box" id="green"></div>
<div class="box" id="purple"></div>

CSS

.box {
  position: relative;
  float: left;
  margin-right: 12px;
  width: 70px;
  height: 70px;
}

#red {
  background-color: #cc2a36;
}

#yellow {
  background-color: #ffdb00;
}

#green {
  background-color:#008000;
}

#purple {
  background-color: #800080;
}

JavaScript

var red = document.getElementById("red"),
  yellow = document.getElementById("yellow"),
  blue = document.getElementById("green"),
  ocean = document.getElementById("purple");

TweenMax.staggerTo([red, yellow, blue, ocean], 1, {
  scale: 0.1,
  opacity: 0.4
}, 0.25);