JSFiddle - React, Tailwind, and code Playground

HTML

<section class="project-images">
    <div class="container">
        <div class="section-heading">
            <h3 class="title wow fadeInDown" data-wow-delay=".3s">  TEXT </h3>
            <h3 class="project-imgsub">Images and Details</h3>
            <div class="row flex">
                <div class="col-sm-4 ">
                    <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
                        <figcaption>
                            <h2>TITLE TEXT</h2>
                            <p class="para">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec po
                            </p>
                        </figcaption>
                        <div class="img-wrapper">
                            <img src="" alt="img-here" class="img-responsive" >
                        </div>
                                    
                        </figure>
                  </div>
              <div class="col-sm-4 ">
                    <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
                        <figcaption>
                            <h2>TITLE TEXT</h2>
                            <p class="para">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristique er
                            </p>
                        </figcaption>
                        <div class="img-wrapper">
                            <img src="" alt="img-here" class="img-responsive" >
                        </div>
                                    
                        </figure>
                  </div>
                  
                                <div class="col-sm-4 ">
                   ...

CSS

.flex{
  display: flex;
  flex-wrap: wrap;
  margin: auto;

}
.col-sm-4{
  max-width: 100%;
  width: 33%;
  display: flex;
}
.project-images .section-heading .title {
    padding-bottom: 0px;
    font-size: 250%;
    line-height: 1.1;
    font-weight: 400;
    color: #1c1c1c;
    text-transform: uppercase;
    }

    .project-images {
    padding: 80px
    }

    .project-imgsub {
    padding-bottom: 50px;
    margin-top: 0;
    color: #666;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1px;
    }


    .project-images .service-parts .block {
    margin-bottom: 0px;
    text-align: center;
    }

    .project-images .service-parts .block i {
    font-size: 35px;
    color: #00bfff;
    }
    .project-images .service-parts .block p {
    padding: 0 8px;
    font-size: 14px;
    color: #777;
    line-height: 1.7;
    }
    .project-images figure .buttons {
    position: absolute;
    top: 45%;
    left: 13%;
    }

    .project-images h2 {
    padding: 20px 20px 0px 20px;
    text-align: center;
    margin-bottom: 0;
    }

    .project-images .img-cust {
    display: inline-block;
    }
    
    p.para {
    padding: 0 20px 0 20px;
    text-align: center;
}

figure {
    background: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.22), 0 2px 10px 0 rgba(0, 0, 0, 0.22);
    -webkit-margin-end: 0;
    -webkit-margin-start: 0;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    margin: 10px 10px 5px 10px;
  }
    figure .img-wrapper {
    position: relative;
    overflow: hidden;
    }
    figure img {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transition: -webkit-transform 400ms;
    transition: transform 400ms;
    width: 100%;
    max-width: 100%;
    }

    figure:hover img {
    -webkit-transform: scale3d(1.2, 1.2, 1);
    transform: scale3d(1.2, 1.2, 1);
    }