JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="wrapper">
    <div class="block n1">
      <div class="content">
        <div class="header">заказ</div>
        <div class="text">заказ</div>
      </div>
    </div>
    <div class="block n2">
      <div class="content">
        <div class="text">ответ</div>
        <div class="header">ответ</div>
      </div>
    </div>
    <div class="block n3">
      <div class="content">
        <div class="header">подтверждение</div>
        <div class="text">подтверждение</div>
      </div>
    </div>
    <div class="block n4">
      <div class="content">
        <div class="text">печать</div>
        <div class="header">печать</div>
      </div>
    </div>
    <div class="block n5">
      <div class="content">
        <div class="header">доставка</div>
        <div class="text">доставка</div>
      </div>
    </div>

    <div class="snake n1"></div>
    <div class="snake n2"></div>
    <div class="snake n3"></div>
    <div class="snake n4"></div>
    <div class="snake n5"></div>
  </div>
</div>

CSS

.main{
  width:80%;
  position:relative;
  border:1px solid #eee;
}
.main:after{
  content:'';
  display:block;
  width:100%;
  padding-bottom:80%;
}
.wrapper{
  position:absolute;
  width:100%;
  height:100%;
  overflow:hidden;
}
.block{
  position:absolute;
  width:23%;
  height:23%;
  border:1px solid #bbb;
  border-radius:8%;
  overflow:hidden;
}
.content{
  display:flex;
  width:100%;
  height:100%;
  text-align:center;
  flex-direction:column;
}
.header{
  width:100%;
  background:#fff;
  font-size:3vw;
}
.text{
  width:100%;
  flex-grow:1;
  font-size:2vw;
}
.block.n1{
  top:10%;
  left:5%;
  background:#95f;
}
.block.n2{
  bottom:10%;
  left:22%;
  background:#95f;
}
.block.n3{
  top:10%;
  left:38%;
  background:#95f;
}
.block.n4{
  bottom:10%;
  left:55%;
  background:#95f;
}
.block.n5{
  top:10%;
  left:71%;
  background:#95f;
}

.snake{
  position:absolute;
  width:18%;
  height:18%;
  border-radius:100%;
}
.snake:nth-child(odd){
  border-top:4px solid #bbb;
}
.snake:nth-child(even){
  border-bottom:4px solid #bbb;
}
.snake.n1{
  top:35%;
  left:8%;
}
.snake.n2{
  top:40%;
  left:25%;
}
.snake.n3{
  top:35%;
  left:42%;
}
.snake.n4{
  top:40%;
  left:59%;
}
.snake.n5{
  top:35%;
  left:76%;
}