JSFiddle - React, Tailwind, and code Playground

by Brad9aga

HTML

<section class="planning">
  <div class="container">
    <h3 class="planning__title"><span>Простой процесс <b>планирования</b></span></h3>
    <div class="planning__wrap">
      <h3 class="planning__item"><span>Выберите<br> Заявки</span></h3>
      <h3 class="planning__item"><span>Выберите<br> Транспортное средство</span></h3>
      <h3 class="planning__item"><span>Проверьте<br> Предварительное распределение заявок</span></h3>
    </div>
  </div>
  <div class="planning__image">
    <img src="https://i.ibb.co/T1JDkXh/planning-image.png" alt="">
  </div>
</section>

CSS

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}

.planning {

  background-color: #EFEFEF;

}

.planning__title {
  font-size: 55px;
  font-weight: 100;
  line-height: 64px;
  color: #000000;
  font-family: "HelveticaNeue";
  padding-top: 60px;
  padding-bottom: 54px;


}

.planning__title b {
  font-weight: 700;
}

.planning__wrap {
  max-width:700px;
  margin: auto;
  display: flex;
  flex-grow:0;
  flex-flow:row nowrap;
  align-items: center;
}

.planning__item {
  flex: 1;
  position: relative;
  padding-left: 30px;
  color: #000;
  font-family: "HelveticaNeue";
  font-size: 24px;
  line-height: 26px;
}

.planning__item:after {
  position: absolute;
  content: ' ';
  border: 60px solid transparent;
  border-left: 120px solid #d8d8d8;
  top: 50%;
  left: 0;
  z-index: 1;
  transform: translateY(-50%);
}


.planning__image {
  margin-top: 50px;
  display: flex;
  flex-flow: column wrap;

}

span {
  position: relative;
  z-index: 3;
}