JSFiddle - React, Tailwind, and code Playground

by antouank

HTML

<div id="main">
    <div id="wrapper">
        <div class="low low1"></div><div class="low low2"></div><div class="med med1"></div><div class="med med2"></div><div class="high high1"></div><div class="high high2"></div>
    </div>
</div>

CSS

@-webkit-keyframes appear {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

#main {
    width: 100px;
    height: 40px;
}

#wrapper {
    height: 100%;
    width: 100%;
}

#wrapper > div {
    -webkit-animation: appear 600ms;
    
    display: inline-block;
    margin: 0 1.8%;
    width: 13%;
}

.low {
    background: #d9534f;
}
.low1 {
    height: 15%;
}
.low2 {
    height: 30%;
}

.med {
    background: #f0ad4e;
}
.med1 {
    height: 45%;
}
.med2 {
    height: 65%;
}


.high {
    background: #5cb85c;
}
.high1 {
    height: 80%;
}
.high2 {
    height: 95%;
}