JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="graduation ">
  <li><span>0</span></li>
  <li><span>50</span></li>
  <li><span>100</span></li>
  <li><span>200</span></li>
  <li><span>500</span></li>
  <li><span>1000</span></li>
  <li><span>2500</span></li>
  <li><span>5000</span></li>
  <li><span>+5000</span></li>
</ul>

CSS

.graduation {
  display:flex;
  justify-content: flex-end;
  padding:0;
  margin:0;
  width: 300px;
  color: #fff;
  margin-left: -0.5em;
}
.graduation li {
  list-style: none;
  text-align: center;
  flex:auto;
}

.graduation li:before {
  display:inline-block;
  padding-top:100%;
  content:'';
  vertical-align:middle;
  margin: 0.5em 0 1.5em -0.5em;
  /*margin-top:0.5em;*/
}

.graduation li span {
  display:inline-block;
  width:100%;
  text-align:right;
  transform: rotate(-90deg);
  float:right;
  direction:rtl;
  margin-top:1em;
}

.graduation li:nth-child(1) { background: #700; flex: 1; }
.graduation li:nth-child(2) { background: #900; flex: 1; }
.graduation li:nth-child(3) { background: #c00; flex: 1; }
.graduation li:nth-child(4) { background: #070; flex: 1; }
.graduation li:nth-child(5) { background: #090; flex: 1; }
.graduation li:nth-child(6) { background: #0c0; flex: 1; }
.graduation li:nth-child(7) { background: #909; flex: 1; }
.graduation li:nth-child(8) { background: #c0c; flex: 1; }
.graduation li:nth-child(9) { background: #707; flex: 1; }