JSFiddle - React, Tailwind, and code Playground
HTML
<section class="requests">
<div class="requests__wrapper">
<div class="requests__title">
Требования к <span>водителям</span>
</div>
<div class="requests__row">
<div class="requests__column column-requests requests__column_first">
<div class="column-requests__icon">
<img src="img/requests__img_first.png" alt="">
</div>
<div class="column-requests__title">
Стаж вождения:
</div>
<div class="column-requests__text">
От 3-х лет
</div>
<div class="column-requests__icon">
<img src="img/requests__img_second.png" alt="">
</div>
<div class="column-requests__title">
Автомобиль:
</div>
<div class="column-requests__text">
От 2009 г.в.
</div>
</div>
<div class="requests__column column-requests requests__column_second">
<img class="image" src="https://i.redd.it/24b24607sla01.jpg" alt="">
</div>
<div class="requests__column column-requests requests__column_third">
<div class="column-requests__icon">
<img src="img/requests__img_third.png" alt="">
</div>
<div class="column-requests__title">
Возраст:
</div>
<div class="column-requests__text">
От 21 года
</div>
<div class="column-requests__icon">
<img src="img/requests__img_fouth.png" alt="">
</div>
<div class="column-requests__title">
Для оплаты:
</div>
<div class="column-requests__text">
Смартфон и банковская карта
</div>
</div>
</div>
<div class="requests__banner banner-requests">
<div class="banner-requests__text">
Подключаем водителей, в том числе, с водительскими правами стран СНГ
</div>
</div>
</div>
</section>
CSS
.requests {
background: lightgreen;
padding: 10px;
display: flex;
flex-direction: column;
}
.requests__title {
text-align: center;
margin-bottom: 15px;
}
.requests__row {
display: flex;
justify-content: space-between;
}
.requests__column {
display: flex;
flex-direction: column;
}
.requests__column_first,
.requests__column_third {
width: 30%;
padding: 10px;
}
.requests__column_second {
width: 40%;
}
.image {
object-fit: cover;
height: 150px;
}
.requests__banner {
text-align: center;
margin-top: 15px;
}