JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-md-8 col-xs-12 testimonials">
          <p class="sub_heading">Recent Testimonials</p>
          <div class="row">
            <div class="col-xs-12 col-md-1 testimonials-img-div">
              <img src="assets/profile.png" alt="profile">
            </div>
            
            <div class="col-xs-12 col-md-11">
              <p>"There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable"</p>
            </div>
          </div>

        </div>

CSS

.sub_heading{
  color: orange !important;
  margin-bottom: 0.5em !important;
  font-size: 2.5em !important;
  white-space: nowrap;
}

.sub_heading_projects{
  color: orange !important;
  margin-bottom: 0% !important;
  margin-top: 3% !important;
  font-size: 2.5em !important;
  white-space: nowrap;
}

.testimonials .sub_heading, .events .sub_heading{
  color: orange !important;
  margin-bottom: 4%;
  font-size: 2em !important;
  margin-left: 0% !important;
}


.testimonials-img-div{
  text-align: center;
}
.testimonials p,.events P{
  margin: 0% 3%;
}
.foot{
  background-color: orangered;
  color: white;
}

@media only screen and (max-width:767px){
  .testimonials img,.work-service{
    margin-left:auto;
    margin-right: auto;
    text-align: center !important; 
  }


  .testimonials .sub_heading, .events .sub_heading{
    margin-left:auto;
    margin-right: auto;
    text-align: center; 
    font-size: 150% !important;
  }



}