JSFiddle - React, Tailwind, and code Playground

HTML

<div class="root" style="display: block;">
  <div class="section">
    <div class="container">
      <h3>Basic</h3>
      <div class="content">
        <div class="completed"><img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2012/240/iconmonstr-check-mark-1.png" class="completed"><span>1</span></div>
        <div class="current"><span>2</span></div>
      </div>
      <h3>Intermediate</h3>
      <div class="content">
        <div><span>3</span></div>
      </div>
      <h3>Advanced</h3>
      <div class="content">
        <div><span>4</span></div>
      </div>
      <h3>Expert</h3>
      <div class="content">
        <div><span>5</span></div>
      </div>
    </div>
  </div>
</div>

CSS

img {
  background: white;
  border: 1px solid black;
  border-radius: 50%;
  position: absolute;
  width: 15px;
  height: 15px;
  margin-left: 20px;
  margin-top: -10px;
}
.root{
  display: flex;
  flex-direction: column;
  height: 400px;
  overflow: auto;
}
.section
{
  flex: 1;
}
.content {
 display: grid; 
 grid-template-columns: repeat(3, 1fr);
 grid-column-gap: 20px;
 grid-row-gap :20px
}
.content div {
  text-align: center;
  border: 2px solid;
}
.content div > span {
 line-height: 50px;
 vertical-align: middle;
}
.container div {
  width: 50px;
  height: 50px;
}