JSFiddle - React, Tailwind, and code Playground

by Harsh Kansagara

HTML

<div class="progress-bar">
  <div class="progress" style="width:40%"></div>
</div>

<br/>

<div class="progress-bar-2">
  <div class="progress" style="width:60%"></div>
  <div class="progress-remaining"></div>
</div>

CSS

body{
  background:#263238;
  padding:100px
}

.progress-bar {
  background-color: #fff;
  border-radius: 100px;
  overflow:hidden;
}

.progress-bar .progress {
  /* background-color: orange; */
  background: rgb(200,230,201);
  background: linear-gradient(90deg, #F78270, #F1C358 , #EFDE62, #E5F3BE, #CDE8F1, #DDC5EE);
  height: 8px;
}

.progress-bar-2 {
  /* background-color: orange; */
  background: rgb(200,230,201);
  background: linear-gradient(90deg, #F78270, #F1C358 , #EFDE62, #E5F3BE, #CDE8F1, #DDC5EE);
  border-radius: 100px;
  display:flex;
  flex-wrap:nowrap;
  overflow:hidden;
}

.progress-bar-2 .progress {
  height: 8px;
  border-radius: 100px;
  flex: 0 0 auto;
  position:relative;
  z-index:3;
  
}

.progress-bar-2 .progress-remaining {
  height: 8px;
  background:#fff;
  flex: 1 1 auto;
}