JSFiddle - React, Tailwind, and code Playground

by robert_schutt

HTML

<div class="container">
  <div class="bar" id="bar1"></div>
  <div class="bar" id="bar2"></div>
  <div class="bar" id="bar3"></div>
</div>

CSS

.container { border: 3px solid green; }
@keyframes animbar {
  0% { max-width: 0%; }
  100% { max-width: 100%; }
}
.bar {
  animation: animbar 1500ms ease;
  height: 32px;
  margin: 16px;
}
#bar1 { background-color: #FF0000; }
#bar2 { background-color: #00FF00; }
#bar3 { background-color: #0000FF; }

JavaScript

var bars = [500, 200, 400];
for (var i=0; i<3; i++) {
  document.getElementById('bar'+(i+1)).style.width = bars[i]+'px';
}