JSFiddle - React, Tailwind, and code Playground

by wtkd

HTML

<div class="nescau_overlay">
<div class="nescau_ball nescau_ball0" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball1" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball2" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball3" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball4" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball5" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball6" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball7" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball8" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball9" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball10" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball11" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball12" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball13" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball14" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball15" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball16" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball17" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball18" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball19" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball20" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball21" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball22" style="display: block; height: auto;"></div>
<div class="nescau_ball nescau_ball23"...

CSS

.nescau_overlay {
  bottom: 210px
  height: 0
  left: 0
  position: absolute
  width: 100%
}

.nescau_ball {
  -webkit-transition: all 0.4s
  background: image-url('http://i.imgur.com/0ipccFl.png') no-repeat
  display: none
  height: 36px
  position: relative
  width: 36px
  z-index: 2
}
.nescau_ball.start {
  display: block
}
.nescau_ball1 {
  margin-left: 130px

.nescau_ball2 {
  margin-left: 300px
}

.nescau_ball3 {
  margin-left: 800px
}

.nescau_ball4 {
  margin-left: 600px
}

.nescau_ball5 {
  margin-left: 700px
}

.nescau_ball6 {
  margin-left: 200px
}

.nescau_ball7 {
  margin: 50px 0 0 20px
}

.nescau_ball17 }
  margin-left: 100px
}

.nescau_ball8 {
  margin-left: 110px
}

.nescau_ball9 {
  margin-left: 900px
}

.nescau_ball10 }
  margin-left: 550px
}

.nescau_ball11 {
  margin-left: 350px
}

.nescau_ball12 {
  margin-left: 275px
}

.nescau_ball13 {
  margin-left: 715px
}

.nescau_ball14 {
  margin-left: 570px
}

.nescau_ball15 {
  margin-left: 650px
}

.nescau_ball16 {
  margin-left: 100px
}

.nescau_ball17 {
  margin-left: 250px
}

.nescau_ball18 {
  margin-left: 450px
}

.nescau_ball19 {
  margin-left: 390px
}

.nescau_ball20 {
  margin-left: 0
}

.nescau_ball21 {
  margin-left: 160px
}

.nescau_ball22 {
  margin-left: 620px
}

.nescau_ball23 {
  margin-left: 490px
}

.nescau_ball24 {
  margin-left: 900px
}
.nescau_ball25 {
  margin-left: 720px
  bottom: 342px
}

.nescau_ball26 {
  margin-left: 640px
  bottom: 310px
}

.nescau_ball27 {
  margin-left: 390px
  bottom: 390px
}

.nescau_ball28 {
  margin-left: 200px
  bottom: 340px
}

.nescau_ball29 {
  margin-left: 480px
  bottom: 500px
}

.nescau_ball30 {
  margin-left: 130px
  bottom: 410px
}

.nescau_ball31 {
  margin-left: 330px
  bottom: 250px
}

.nescau_ball32 {
  margin-left: 780px
  bottom: 300px
}

.nescau_ball33 {
  margin-left: 620px
  bottom: 400px
}

.nescau_ball34 {
  margin-left: 700px
  bottom: 500px
}

.nescau_ball35 {
  margin-left: 250px
  bottom: 380px
}

.nescau_ball36 {
  margin:...