JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li class="up"><div></div></li>

  <li class="active"><div class="circle"></div><div class="text">1</div></li>
  
  <li><div class="circle"></div><div class="text">2</div></li>
  
  <li><div class="circle"></div><div class="text">3</div></li>
  
  <li><div class="circle"></div><div class="text">4 </div></li>
  
  <li><div class="circle"></div><div class="text">5</div></li>
  
  <li class="down"><div></div></li>
</ul>

CSS

ul {
  display:inline-block;
  padding:2px 7px;
  border:2px solid black;
}
li {
  position:relative;
  list-style: none;
  height:14px;
  padding:3px 0;
}

.circle {
  width: 10px;
	height: 10px;
	background: #fff;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;  
  border: 2px solid black;
  display: inline-block;
  vertical-align: top;
}
.text {
  position:absolute;
  display: inline-block;
  vertical-align: bottom;
  right:-20px;
  top:2px;
}

.active .circle {
  background: #0d6ed1;
}
.active .text {
  color: #0d6ed1;
}

.up, .down {
  text-align:center;
  height:5px;
  line-height:0px;
}
.up div {
  display:inline-block;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid black;
}
.down div {
  display:inline-block;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid black;
}