JSFiddle - React, Tailwind, and code Playground

by Dragan Novkovic

HTML

<div class="statistics" >Statistics</div>
             <ul class="statisticsGraph">
              <li><div class="statLine"><span class="statCircle"></span><span class="number"></span></div></li>
              <li><div class="statLine"><span class="statCircle"></span><span class="number"></span></div></li>
              <li><div class="statLine"><span class="statCircle"></span><span class="number"></span></div></li>
              <li><div class="statLine"><span class="statCircle"></span><span class="number"></span></div></li>
              <li><div class="statLine"><span class="statCircle"></span><span class="number"></span></div></li>
              <li><div class="statLine"><span class="statCircle"></span><span class="number"></span></div></li>
              <li><div class="statLine"><span class="statCircle"></span><span class="number"></span></div></li>
             </ul>

CSS

.statistics {
  position: relative;
  display: block;
  width: 100%;
  border-bottom: 1px solid #000;
  height: 30px;
  background: #fff;
  background: #000;
  color: #fff;
  padding:20px 20px;
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
}

ul.statisticsGraph li {
  position: relative;
  display: inline-block;
  float: right;
  width: 10%;
  margin: 10px 5px 0 0;
  height: 230px;
}

.statLine {
  position: absolute;
  display: block;
  background: red;
  width: 5px;
  bottom: 0px;
  overflow:visible !important;
}
.statCircle {
  position: relative;
  display: block;
  width: 8px;
  height:8px;
  left: -8px;
  border-radius: 50%;
  background: yellow;
  border: 6px solid red;
}
.number {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 15px;
  color: #000;
  padding: 4px;
  font-size: 18px;
  top: -60px;
  left: -17px;
  border-radius: 3px;
  border: 1px solid #ffd800;
}

JavaScript

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

  $('.statistics').on('click',function(){
   $('.statLine').each(function(){
      var statsValue = $('.statLine').height(); 
    $(this).animate({'height':'0'}, function(){
      $(this).animate({'height' : getRandomInt(0,200)});
        $('.number').text(statsValue);        
    }); 
      
  }); 

  });