JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
  <div class="item"><span>1</span></div>
  <div class="item"><span>2</span></div>
  <div class="item"><span>3</span></div>
  <div class="item"><span>4</span></div>
  <div class="item"><span>5</span></div>
</div>

CSS

body{
  max-width: 850px;
}
.row{
  align-items: center;
  display: flex;
  
}
.item{
  position: relative;
  flex: 0 0 25%;
}
.item span{
  margin: 0px auto;
  width: 50px;
  height: 50px;
  background-color: lime;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item::after{
  position: absolute;
  content: '';
  width: 100px;
  height: 2px;
  top: 50%;
  background-color: grey;
  transform: translateY(-50%);
  right: -50px;
}
.item:last-child::after{
  display: none;
}
.item:last-child span{
  width: 100px;
  height: 100px;
}