JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="ziziForm">
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div class="zizi"></div>
<div...

CSS

html,body {
	padding:0;
    margin: 0;
}


.ziziForm{font-size: 0;margin: 200px 0 0;}

.zizi {
	background: #000;
  display: inline-block;
    vertical-align: top;
  height: 1px;
  margin: 0;
  position: relative;
  transition: all linear 300ms;
  width: 15px;
  -webkit-box-reflect:below -1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.35, transparent), to(white));
    width: 1%;
}

JavaScript

var elem = $('div.zizi');
var count = elem.length;

var loop = function(){ 
  
  setTimeout(function(){
    elem.each(function(){
      var $this = $(this);
      var height = (Math.random() * 120) + 1;
      $this.css({
        'background': 'rgba(150, 100, 150,'+(.99-($this.index()/count)/2)+')',
        'bottom': height,
        'height': height
      });
    });
    loop();
  }, 175);
  
}
    
loop();