JSFiddle - React, Tailwind, and code Playground

HTML

<div class="visible">
  <ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ol>
</div>

CSS

.visible {
  width: 80%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

  .visible ol {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    list-style: none;
    counter-reset: cnt;
  }
  
    .visible ol li {
      flex-grow: 1;
      height: 100px;
      margin: 0;
      padding: 0;
      position: relative;
    }
    
      .visible ol li:before {
        content: counter(cnt); 
        counter-increment: cnt;
        width: 20px;
        height: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        line-height: 20px;
        text-align: center;
        background: #eee;
        border-radius: 100%;
        transform: translate(-50%, -50%);
      }
  
      .visible ol li:nth-child(1):before ,
      .visible ol li:nth-child(5):before {
        margin-top: 28px;
      }

      .visible ol li:nth-child(2):before,
      .visible ol li:nth-child(4):before {
        margin-top: 8px;
      }
    
      .visible ol:before {
        content: '';
        position: absolute;
        top: 50%;
        left: -30%;
        right: -30%;
        bottom: -350%;
        border: 2px solid #000;
        border-radius: 100%;
      }