JSFiddle - React, Tailwind, and code Playground

HTML

<div class="work">
        <h6>What is xx<strong>xxx</strong> ?</h6>


        <div id="images">
            <div class="img1">
                <img src="https://i.imgur.com/n290Uoa.jpg" alt="fb" />
                <h5>Title1</h5>
                <div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget congue lorem. Curabitur finibus ut metus quis accumsan. Nulla feugiat, mauris convallis lobortis imperdiet, </p></div>
            </div>

            <div class="img2">
                <img src="2.png" alt="fb" />
                <h5>Title2</h5>
                <div class="text2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget congue lorem. Curabitur finibus ut metus quis accumsan. Nulla feugiat, mauris convallis lobortis imperdiet,</p></div>
            </div>

            <div class="img3">
                <img src="3.png" alt="fb" />
                <h5>Title3</h5>
                <div class="text3"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget congue lorem. Curabitur finibus ut metus quis accumsan. Nulla feugiat, mauris convallis lobortis imperdiet, </p></div>
            </div>
        </div>
    </div>

CSS

.work 
  {
    margin-bottom: 40px;
    width: 100%;
    text-align: center;
    overflow: hidden;
    display: inline-block;
    h5 {
      font-family: $font;
      color: $text;
      font-size: 1.4em;
    }
    p {
      font-family: $font;
      color: $text;
      font-size: 1em;
      margin-left: auto;
      margin-right: auto;
      width: 80%;
      text-align: center;
    }
    #images {
      display: inline-block;;
      width: 100%;
    }
    img {
      display: inline-block;
    }
      h1 {
        font-size: 1em;
        color: $main-bg;
        text-align: center;
        padding: 0 10px;
        margin-top: 60px;
      } 
      .img1 {
          width: 33%;
          img {
            width: 240px;
          }
      }
      .img2 {
        width: 33%;
        img {
          width: 240px;
        }
      }
      .img3 { 
        width: 33%;
        img {
          width: 240px;
        }
      }
      h6 {
        text-align: center;
        font-size: 1.6em;
        text-transform: uppercase;
        font-weight: 600;
        margin-top: 60px;
        color: $text;
        font-family: $font;
      }
  }
#images {
  display:block;
  width: 100%;
  text-align:center;
}
    .img1, .img2, .img3 {
     display: inline-block;
     width: 33%;
     vertical-align: top;
}