JSFiddle - React, Tailwind, and code Playground

by fuggfuggfugg

HTML

<script src="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.cs"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
<div class="outer-panel" id="outer1">
  <div class="square unassigned">5</div>
  <div class="square unaccepted">10</div>
  <div class="square vital">14</div>
  <div class="square overdue">8</div>
</div> 


<div class="outer-panel"> 
  <div class="square sq2 unassigned"></div>
  <div class="square sq2 unaccepted"></div>
  <div class="square sq2 vital"></div>
  <div class="square sq2 overdue"></div>
</div>

CSS

body{
  height: 100%;
  width: 100%;
}

#outer1{
 display: none;  
}

.outer-panel{
  width: 120px;
  cursor: pointer;
  margin: 20px;
  font-size: 0;
}

.outer-panel:hover .square{
   margin: 3px 0px;
   height: 8px;
   transition: height 250ms, margin  220ms; 
}

.square{
  width:2%;
  display: inline-block;
  height: 13px;
  text-align: center;
  background: #f5f5f5;
  font-size: 10px;
  font-family: sans-serif;
  color: rgba(0,0,0,0.5);
  margin: 2px 0px;
  transition: width 200ms ;
}

.sq2{
  height: 3px;
  display: block;
  margin: 2px 0px;
}


.unassigned{
  background: #bdc3c7;  
  /*color: #7f8c8d;*/
  transition-delay: 0ms;
}

.unaccepted{
  background: #9b59b6;
  /*color: #8e44ad;*/
  transition-delay: 200ms;
}

.vital{
  background: #f39c12;
  /*color: #d35400;*/
  transition-delay: 400ms;
}

.overdue{
  background: #e74c3c;
  /*color: #c0392b*/
  transition-delay: 600ms;
}

JavaScript

setTimeout(function(){
    $(".sq2.unassigned").css("width","10%");  
    $(".sq2.unaccepted").css("width","50%");
    $(".sq2.vital").css("width","30%");
    $(".sq2.overdue").css("width","70%");   
     
}, 300);