JSFiddle - React, Tailwind, and code Playground

HTML

<div class="feature">
        <div class="feature__item">
            <img class="feature__img" src="images/icons/quality.png" alt="">
            <div class="feature__info">
                <h3 class="feature__title">High Quality</h3>
                <p class="feature__text">crafted from top materials</p>
            </div>
        </div>
        <div class="feature__item">
            <img class="feature__img" src="images/icons/tick.png" alt="">
            <div class="feature__info">

                <h3 class="feature__title">Warrany Protection</h3>
                <p class="feature__text">Over 2 years</p>
            </div>
        </div>
        <div class="feature__item">
            <img class="feature__img" src="images/icons/shipping.png" alt="">
            <div class="feature__info">

                <h3 class="feature__title">Free Shipping</h3>
                <p class="feature__text">Order over 150 $</p>
            </div>
        </div>
        <div class="feature__item">
            <img class="feature__img" src="images/icons/support.png" alt="">
            <div class="feature__info">

                <h3 class="feature__title">24 / 7 Support</h3>
                <p class="feature__text">Dedicated support</p>
            </div>
        </div>
    </div>

CSS

.feature{
  display: flex;
  max-width: 1237px;
  margin: 0 auto;
  height: 261px;
  padding: 0px 30px;
  justify-content: space-evenly;
  
}
.feature__item{
  display: flex;
  align-items: center;
  width: 34%;
}
.feature__info{
  margin: 0px 24px;
  line-height: 1.6;
}
.feature__title{
font-size: 18px;
font-weight: 600;
}
.feature__text{
  color: #898989;
}
@media only screen and (max-width: 768px) {
   .feature{
      flex-wrap: wrap;
      justify-content: center;
    }
    .feature__item{
      width: 100%;
    }
}