JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>
    <div class="border border-top">
    
    <div class="circle active"></div> 
    </div>
    
  <div class="text active_text">  
  1</div></li>
  
  <li><div class="border"><div class="circle"></div></div> <div class="text">2</div></li>
  
  <li><div class="border"><div class="circle"></div></div> <div class="text">3</div></li>
  
  <li><div class="border"><div class="circle"></div></div> <div class="text">4 </div></li>
  
  <li><div class="border border-bottom"><div class="circle"></div></div> <div class="text">5</div></li>
</ul>

CSS

.circle {
  width: 15px;
	height: 15px;
	background: #fff;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;  
  border: 1px solid black;
  margin-bottom: 4px;
  display: inline-block;
  
  
}

li {
  list-style: none;
}

.active {
  background: #0d6ed1;
}

.text {
  display: inline-block;
  vertical-align: top;
}

.active_text {
  color: #0d6ed1;
}

.border {
  border-left: 1px solid black;
  border-right: 1px solid black;
  display: inline-block;
  padding: 3px;
}

.border-top {
  border-top: 1px solid black;
}

.border-bottom {
  border-bottom: 1px solid black;
}