JSFiddle - React, Tailwind, and code Playground

by Mohan Ravi

HTML

<div class='container'>
  <ul class='scale'>
    <li class='tick'></li>
  </ul>
</div>

CSS

.container {
  height: 48px;
  width: 100%;
  background: lightblue;
  position: relative;
  
}

.scale {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 28px;
  background: gray;
  position: absolute;
  top: calc(50% - 14px);
}

.tick {
    background: blue;
    display: inline-block;
    width: 20%;
    height: 2px;
    text-align: center;
    position: absolute;
    top: calc(50% - 1px);
}