JSFiddle - React, Tailwind, and code Playground

by Augustus Yuan

HTML

<div id="progress-bar">
  <div id="progress-level"></div>
</div>

CSS

#progress-bar {
  width: 200px;
  height: 20px;
  border: 1px solid black;
  position: relative;
}

#progress-level {
  width: 0%;
  height: 100%;
  -webkit-transition: width 3s ease-in 0s;
  background: blue;
}

.js-fill {
  width: 50% !important;
 }
}

JavaScript

$(document).ready(function() {
	$("#progress-level").addClass('js-fill');
});