JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<section>
  Progress graph using percentages.
  <div class='progress'>
    <div class='valid' style="--w:33.333%">
    </div>
    <div class='invalid' style="--w:10%">
    </div>
    <div class='unanswered' style="--w:25%">
    </div>
    <div class='something' style="--w:1.666%">
    </div>
  </div>
  
  Progress graph using counts.
  <div class='progress2' style="--total:60">
    <div class='valid' style="--count:20">
    </div>
    <div class='invalid' style="--count:6">
    </div>
    <div class='unanswered' style="--count:15">
    </div>
    <div class='something' style="--count:1">
    </div>
  </div>
  
</section>

CSS

html,
body {
  height: 100%;
}
body {
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
section {
  width: 50%;
}
.progress {
  display:flex;
  background:grey;
  border-radius:3px;
  overflow:hidden;
}
.progress div {
  --bg:grey;
  height:25px;
  &.valid {--bg:green;}
  &.invalid {--bg:red;}
  &.unanswered {--bg:orange;}
  &.something {--bg:blue;}
  background:var(--bg);
  width:var(--w, 0%);
}


.progress2 {
  display:flex;
  background:grey;
  border-radius:3px;
  overflow:hidden;
  --total:0;
  height:5px;
}
.progress2 div {
  --bg:grey;
  --count:0;
  &.valid {--bg:green;}
  &.invalid {--bg:red;}
  &.unanswered {--bg:orange;}
  &.something {--bg:blue;}
  background:var(--bg);
  width:calc(((100 / 60) * var(--count) * 1%));
}