JSFiddle - React, Tailwind, and code Playground

by Elena Shevchuk

HTML

<ul class="list-steps">
        <li class="step-blue">
          <i class="icon icon-step-1"></i>
          <h3>Напишем техническое задание за Вас</h3>
          <p>Вы раскажите о целях и задачах специалисту по маркетингу и продажам. Основываясь на этих данных, мы создадим прототип, который позволит удержать внимание покупателей</p>
        </li>
        <li class="step-blue_dark step-icon-right">
          <i class="icon icon-step-2"></i>
          <h3>Наше слово имеет вес</h3>
          <p>Копирайтер составит текст, который проведет посетителей по всему сайту и расположит его к совершению покупки</p>
        </li>
        <li class="step-green">
          <i class="icon icon-step-3"></i>
          <h3>Дизайн продает - это факт!</h3>
          <p>Мы создаем дизайн, учитывая последние тренды в разработке, дизайн будет продавать совместно с текстом и пользователь совершит интересующие нас действия</p>
        </li>
      </ul>

CSS

.list-steps {
  list-style: none;
  padding: 0;
  margin: -25px 0 80px;
}
.list-steps .step-icon-right .icon {
  left: auto;
  right: 0;
}
.list-steps h3 {
  position: relative;
  font-size: 18px;
}
.list-steps p {
  position: relative;
  font-size: 15px;
  line-height: 1.2;
}
.list-steps li {
  padding: 75px 240px 75px;
  position: relative;
}
.list-steps li:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  border: 470px solid transparent;
  border-top: 60px solid white;
  border-bottom: none;
}
.list-steps li:first-child:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border: 470px solid transparent;
  border-top: 60px solid white;
  border-bottom: none;
}
.list-steps .icon {
  position: absolute;
  top: 52px;
  left: 0;
}
.list-steps .step-blue {
  color: black;
  background: #a6dae9;
}
.list-steps .step-blue:after {
  border-top-color: #a6dae9;
}
.list-steps .step-blue_dark {
  padding-top: 115px;
  padding-bottom: 80px;
  color: white;
  background: #103753;
}
.list-steps .step-blue_dark:after {
  border-top-color: #103753;
}
.list-steps .step-green {
  padding-top: 110px;
  color: white;
  background: #a0b400;
}
.list-steps .step-green:after {
  border-top-color: #a0b400;
}