JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="blocks">
    <div class="block left"><span>Маркетинг</span></div>
    <div></div>
    <div class="block center"><span>Рентабельность</span></div>
    <div></div>
    <div class="block right"><span>Точка безубыточности</span></div>
  </div>
  <div class="text">
    <span>Запросить детальный бизнес план</span>
  </div>
  <div>

  </div>
</div>

CSS

.main{
  background:#009;
  padding:20px;
}
.blocks{
  position:relative;
  display:flex;
  flex-direction:row;
}
.blocks div{
  display:flex;
  flex-grow:1;
  padding:5px 0;
}
.blocks div.block{
  position:relative;
  min-width:20%;
  flex-grow:0;
  border:2px solid #fff;
}
.blocks div.block span{
  display:inline-block;
  width:100%;
  text-align:center;
  color:#fff;
  overflow:hidden;
}

.blocks:after{
  content:'';
  position:absolute;
  display:block;
  bottom:-20px;
  width:100%;
  border-bottom:1px dashed #fff;
  z-index:0;
}
.blocks div.block:after{
  content:'';
  position:absolute;
  display:block;
  bottom:-22px;
  height:20px;
  background:#009;
  width:50%;
  z-index:1;
}
.blocks div.left:after{
  left:-2px;
  border-right:1px dashed #fff;
}
.blocks div.right:after{
  right:-2px;
  border-left:1px dashed #fff;
}
.blocks div.center:after{
  bottom:-42px;
  height:40px;
  right:-2px;
  border-left:1px dashed #fff;
  background:transparent;
}
.blocks div.center:before{
  content:'';
  position:absolute;
  display:block;
  bottom:-24px;
  width:5px;
  height:5px;
  left:calc(50% - 1px);
  background:#fff;
}

.text{
  margin-top:40px;
  border:4px solid #fff;
  padding:2px;
}
.text span{
  display:inline-block;
  width:100%;
  text-align:center;
  font-size:20px;
  color:#009;
  background:#fff;
}