JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <div class="container services">
        <div class="row">
            <div class="col-md-2 col-xs-2  service">
             <a href="#">
                <img src="http://placeimg.com/100/100/tech/sepia" class="main" alt="">
                <p>Услуги<br/>поликлиники</p>
            </a>
            </div>
            <div class="col-md-offset-1 col-xs-offset-1  col-md-2 col-xs-2 service">
             <a href="#">
                <img src="http://placeimg.com/100/100/tech/sepia" class="main" alt="">
                <p>Услуги<br/>поликлиники</p>
            </a>
            </div>
            <div class="col-md-offset-1 col-xs-offset-1  col-md-2 col-xs-2  service ">
             <a href="#">
                <img src="http://placeimg.com/100/100/tech/sepia" class="main" alt="">
                <p>Услуги<br/>поликлиники</p>
            </a>
            </div>
            <div class="col-md-offset-1 col-xs-offset-1 col-md-2 col-xs-2  service">
             <a href="#">
                <img src="http://placeimg.com/100/100/tech/sepia" class="main" alt="">
                <p>Услуги<br/>поликлиники</p>
            </a>
            </div>
        </div>
    </div>
</header>

CSS

.row {
  display: flex;
}
.service {
  display: flex;
  text-align: center;
  margin-right: 32px;
  position: relative;
  padding:0;
}
.service:last-child{
  margin-right: 0;
}
.service-item {
}
.service img {
   max-width: 100%;
   display: block;
   margin: 0 auto;
}
.service a {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: space-between;
}
.service a p {
  display: block;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  color: #2a2a2a;      
}