JSFiddle - React, Tailwind, and code Playground

by RomanFF

HTML

<section class="print">
		<div class="wrapper print-flex">
		<div class="print-stages">
			<ul class="print-stages_list">
				<li class="print-stages_item crimson">
					<h4 class="print-stages-title #E778A7">Заказ</h4>
					<p class="print-stages-subtitle">Вы размещаете заказ на сайт <br> через сайт или через форму</p>
				</li>
				<li class="print-stages_item green">
					<h4 class="print-stages-title #71C24C">Подтверждение</h4>
					<p class="print-stages-subtitle">Вы подтверждаете все <br> параметры заказа</p>
				</li>
				<li class="print-stages_item purple">
					<h4 class="print-stages-title #594487">Доставка</h4>
					<p class="print-stages-subtitle">Мы доставляем ваш заказ <br> выбранным способом</p>
				</li>
			</ul>
			<ul class="print-stages_list">
				<li class="print-stages_item blue">
					<p class="print-stages-subtitle">Быстрый ответ с варинтами <br> исполнения и сроками</p>
					<h4 class="print-stages-title #26CDDA">Ответ</h4>
				</li>
				<li class="print-stages_item yellow">
					<p class="print-stages-subtitle">Мы печатаем ваш заказ <br> в кратчайшие сроки</p>
					<h4 class="print-stages-title #FCE000">Печать</h4>
				</li>
			</ul>
		</div>
	</div>
	</section>

CSS

li{
  list-style-type:none;
}
h4{
  margin:0 auto;
}
/*workStages*/
.print-flex{
	display: flex;
	justify-content: space-between;
	align-items: center;

}
.print-stages{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
.print-stages_list{
	display: flex;
}
.print-stages_item{
	border-radius:10px;
}
.print-stages-title{
	padding: 14px 50px;
	background-color: #fff;
	font-size: 30px;
	text-align: center;
}
.print-stages-subtitle{
	text-align: center;
	margin-bottom: 20px;
	color: white;
	font-weight: bold;
}
.crimson{
	background: linear-gradient(to top, #CB2667, #A61E62);
	border: 1px solid #E778A7;
}
.green{
	background: linear-gradient(to left, #94C52D, #48B543);
	border: 1px solid #71C24C;
}
.purple{
	background: linear-gradient(to left,  #6E276A, #553B7E);
	border: 1px solid #594487;
}
.blue{
	background: linear-gradient(to left,  #34F6E5, #0535A1);
	border: 1px solid #26CDDA;
}
.yellow{
	background: linear-gradient(to left,  #FCE203, #F48D00);
	border: 1px solid #FCE000;
}

JavaScript

let h4 = document.querySelectorAll('.print-stages-title')
//Цвет заголовков
for (let i = 0; i < h4.length; i++){
	h4[i].style.color = h4[i].classList[1];
}

let ul = document.querySelectorAll('.print-stages_list')
console.log(ul.length)

/* for(let j = 0; j < ul.length;j++){
  if(j < 4){
  
  }
} */