JSFiddle - React, Tailwind, and code Playground

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

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

body {
	padding: 100px 0 0 10px; 
}

div {
	background: #000;
  float: left;
  height: 1px;
  margin: 0 1px 0 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));
}

JavaScript

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

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