JSFiddle - React, Tailwind, and code Playground

HTML

<section class="portfolio">
  <div class="portfolio__container">
     <ul class="works">
       <li class="works__item">
         <div class="works__img">
           <img src="https://images.unsplash.com/photo-1548799767-f168d215106a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1381&q=80" alt="Work image">
         </div>
         <div class="works__text">
           <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
         </div>
       </li>
       <li class="works__item">
         <div class="works__img">
           <img src="https://images.unsplash.com/photo-1543363575-d306a0b37c9c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="Work image">
         </div>
         <div class="works__text">
           <p>Далеко-далеко за словесными горами в стране, гласных и согласных.</p>
         </div>
       </li>
       <li class="works__item">
         <div class="works__img">
           <img src="https://images.unsplash.com/photo-1524704796725-9fc3044a58b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1381&q=80" alt="Work image">
         </div>
         <div class="works__text">
           <p>Далеко-далеко за словесными горами в стране.</p>
         </div>
       </li>
     </ul>
  </div>
</section>

SASS

.portfolio
  padding-top: 30px

.portfolio__container
  max-width: 1170px
  margin: 0 auto
  
.works
  display: flex
  flex-wrap: wrap
  justify-content: space-between
  margin-right: -20px
  
.works__item
  width: calc(33.3333% - 20px);
  margin-right: 20px
  
.works__img
  height: 250px
  margin-bottom: 15px
  
  img
    height: 100%
    width: 100%
    object-fit: cover
    
.works__text
  text-align: center
  font-size: 20px