JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<div class="progress">
<div class="progress-bar"></div>
</div>

CSS

body {
  margin: 1rem;
}

.progress {
    background: #FFFFFF;
    border-radius: 13px;
    border: 2px solid #F2A92C;
    height: 12px;
    width: 300px;
}

.progress-bar {
    content: '';
    display: block;
    background: #F7B555;
    width: 0%;
    height: 100%;
    border-radius: 9px;
    animation: 1s progressLoad forwards;
}

@keyframes progressLoad {
  from {width: 0%; }
  to {width: 100%; }
}