JSFiddle - React, Tailwind, and code Playground

by AlexP11223

HTML

<section class="section-services">
<div class="conteiner servicer-conteiner">
      <div class="heading-services">
        <h2 class="heading">Услуги</h2>
        <div class="services-sentence-block">
          <ul class="servicer-offer-information">
            <li><img src="/img/services-1.jpg" alt="" class="services-img">
              <a href=" " class="services-offer">Эксклюзивное обслуживание</a>
              <p class="services-information">Равным образом постоянный количественный рост и сфера нашей активности</p>
            </li>

            <li><img src="/img/services-2.jpg" alt="" class="services-img">
              <a href="" class="services-offer">Аренда банкетных залов</a>
              <p class="services-information">Значимость этих проблем настолько очевидна, что дальнейшее развитие
                различных форм</p>
            </li>

            <li><img src="/img/services-3.jpg" alt="" class="services-img">
              <a href=" " class="services-offer ">Сауны, быссейны, бани, фитнес-залы</a>
              <p class="services-information"> Не следует однако забывать, что начало повседневной работы по
                формированию позмиций</p>
            </li>

            <li>
              <img src="img/services-4.jpg " alt=" " class="services-img ">
              <a href=" " class="services-offer ">Охраняемые автомобильные стоянки</a>
              <p class="services-information ">Не следует, однако забывать, что начало повседневной работы по
                формированию позиций</p>
            </li> 
          </ul>
        </div>
</div>
</div>

    </section>

CSS

.servicer-offer-information {
    display: flex;
    flex-wrap: wrap;
}

.servicer-offer-information li {
    width: 500px;
}