JSFiddle - React, Tailwind, and code Playground
HTML
<figure class="service-1">
<div class="service-1__img">
<img src="https://images.unsplash.com/photo-1548782086-46b920407bf4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" class="icon" alt="">
</div>
<figcaption class="text-service">Вёрстка лендинг–страниц <br>
и сайтов любой сложности</figcaption>
<img src="img/responsive.png" class="icon" alt="">
<figcaption class="text-service">Адаптивная вёрстка под все <br>
браузеры и устройства</figcaption>
<img src="img/programming.png" class="icon" alt="">
<figcaption class="text-service">Frontend–разработка <br>
и программирование</figcaption>
<img src="img/coding.png" class="icon" alt="">
<figcaption class="text-service">Исправление и доработка <br>
существующей вёрстки</figcaption>
</figure>
CSS
.service-1 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.service-1__img {
width: 100%;
height: 300px;
margin-bottom: 20px;
}
.service-1__img img {
width: 100%;
display: block;
height: 100%;
object-fit: cover;
}
.text-service {
width: calc(33.3333% - 15px);
max-width: calc(33.3333% - 15px);
flex: 0 0 calc(33.3333% - 15px);
}