JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Main">

  <div class="Wrapper">
    <div class="Row">
      <div class="Circle__line"></div>
      <div class="Circle" title="Что&nbsp;влияет на&nbsp;поиск&nbsp;работы">1</div>
      <div class="Circle__line"></div>
      <div class="Circle" title="Как&nbsp;вести переговоры по&nbsp;условиям">2</div>
      <div class="Circle__line"></div>
      <div class="Circle" title="Упаковка&nbsp;кандидата. Внешний&nbsp;вид,&nbsp;резюме, сопроводительное, профиль&nbsp;в&nbsp;соцсетях">3</div>
      <div class="Circle__line"></div>
      <div class="Circle" title="Как&nbsp;вести переговоры по&nbsp;условиям">4</div>
      <div class="Circle__line"></div>
    </div>
    <div class="Row">
    <div class="Circle__line"></div>
      <div class="Circle" title="Упаковка&nbsp;кандидата. Внешний&nbsp;вид,&nbsp;резюме, сопроводительное, профиль&nbsp;в&nbsp;соцсетях">3</div>
      <div class="Circle__line"></div>
      <div class="Circle" title="Как&nbsp;вести переговоры по&nbsp;условиям">4</div>
      <div class="Circle__line"></div>
      <div class="Circle" title="Что&nbsp;влияет на&nbsp;поиск&nbsp;работы">5</div>
      <div class="Circle__line"></div>
    </div>
  </div>

</div>

SCSS

.Main{
  background: linear-gradient(to bottom right, #f7f7f7 0%, #828282 100%);
  padding: 40px;
  height: 100vh;
}

.Wrapper{
  border-left: 1px dotted blue;
  border-right: 1px dotted blue;
}

.Circle{
  height: 37px;
  min-width: 37px;
  border-radius: 50%;
  border: 2px solid blue;
  flex: 0;
  text-align: center;
  &__line{
    display: block;
    height: 0;
    flex-growth: 1;
    width: 100%;
    border-top: 1px dotted blue;
  }
  &:after{
    content: attr(title);
    display: flex;
    font-size: 10pt;
    justify-content: center;
    margin-top: 30px;
  }
}

.Row{
  display: flex;
  align-items: center;
  &:first-child .Circle, &:first-child .Circle__line{
    transform: translateY(-20px);
  }
  &:last-child .Circle, &:last-child .Circle__line{
    transform: translateY(20px);
  }
  
  &:first-child{
    margin-bottom: 50px;
  }
  

}