JSFiddle - React, Tailwind, and code Playground

by Sergey Rosinskiy

HTML

<div class="block-quality">
  <h2>Ещё <span>7 плюсов</span>почему нас выбрали наши клиенты:</h2>
  <ul>
    <li><span>1</span> Открытость отношений: полная смета без скрытых платежей. 100% гарантия стабильности цены.</li>
    <li><span>2</span> Мы предоставляем бесплатный замер и бесплатную доставку.</li>
    <li><span>3</span> Профессиональная консультация менеджера с опытом свыше 10 лет.</li>
    <li><span>4</span>Свой собственный жестяной цех-сделаем любую конструкцию из металла по Вашему желанию.</li>
    <li><span>5</span> Собственные бригады монтажа-ответственность сроков,качества и чистоты на участке.</li>
    <li><span>6</span> Индивидуальная работа с каждым клиентом-индивидуальные скидки,учитывание пожеланий клиента и полная работа "под ключ".</li>
    <li><span>7</span> Поэтапная оплата - возможность рассрочки и кредита</li>
  </ul>
</div>
3

CSS

li,
dt,
dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

.block-quality li {
  position: relative;
  padding: 24px 0 24px 90px;
  color: #000;
  font: 700 18px/18px Arial, sans-serif;
  background-color: #fff;
}

.block-quality li span {
  position: absolute;
  left: 0;
  top: 20px;
  width: 77px;
  height: 50px;
  font: 700 60px/50px ArialNarrow, sans-serif;
  color: #ffffff;
  text-align: center;
  background: red;
}

.block-quality li span:before,
.block-quality li span:after {
  content: '';
  position: absolute;
  width: 1px;
  height: 1px;
  left: 0;
  top: -16px;
  border: 38px solid transparent;
  border-top: none;
  border-bottom: 15px solid red;
}

.block-quality li span:after {
  top: auto;
  bottom: -16px;
  border-top: 15px solid red;
  border-bottom: none;
}

.block-quality li:nth-child(2) {
  margin-left: 40px;
}

.block-quality li:nth-child(3) {
  margin-left: 80px;
}

.block-quality li:nth-child(4) {
  margin-left: 120px;
}

.block-quality li:nth-child(5) {
  margin-left: 160px;
}

.block-quality li:nth-child(6) {
  margin-left: 200px;
}

.block-quality li:nth-child(7) {
  margin-left: 240px;
}

.block-quality li:nth-child(8) {
  margin-left: 280px;
}