JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

<div class="grid" data-masonry='{ "itemSelector": ".grid-item"}'>

  <div class="grid-item">
    <img src="//unsplash.it/333/555">
    <div class="text-wrapper">
      Lorem ipsum dolor sit amet, usu cu minim facete tacimates, duo omnis ipsum ea. Putent elaboraret intellegebat mei te. Est no error commodo eripuit. Mazim singulis petentium in qui, sea ea odio alia utroque, enim alienum at vis. Phaedrum deterruisset per
      in, usu veritus aliquando in, ei ludus dolore eirmod pri.
    </div>
  </div>

  <div class="grid-item">
    <img src="//unsplash.it/566/566">
    <div class="text-wrapper">
      Lorem ipsum dolor sit amet, usu cu minim facete tacimates, duo omnis ipsum ea. Putent elaboraret intellegebat mei te. Est no error commodo eripuit. Mazim singulis petentium in qui, sea ea odio alia utroque, enim alienum at vis. Phaedrum deterruisset per
      in, usu veritus aliquando in, ei ludus dolore eirmod pri.
    </div>
  </div>

  <div class="grid-item">
    <img src="//unsplash.it/577/232" />
    <div class="text-wrapper">
      Lorem ipsum dolor sit amet, usu cu minim facete tacimates, duo omnis ipsum ea. Putent elaboraret intellegebat mei te. Est no error commodo eripuit. Mazim singulis petentium in qui, sea ea odio alia utroque, enim alienum at vis. Phaedrum deterruisset per
      in, usu veritus aliquando in, ei ludus dolore eirmod pri.
    </div>
  </div>

  <div class="grid-item">
    <img src="//unsplash.it/734/588" />
    <div class="text-wrapper">
      Lorem ipsum dolor sit amet, usu cu minim facete tacimates, duo omnis ipsum ea. Putent elaboraret intellegebat mei te. Est no error commodo eripuit. Mazim singulis petentium in qui, sea ea odio alia utroque, enim alienum at vis. Phaedrum deterruisset per
      in, usu veritus aliquando in, ei ludus dolore eirmod pri.
    </div>
  </div>

  <div class="grid-item">
    <img src="//unsplash.it/344/501" />
    <div...

CSS

body {
  background: #131418;
}

.grid-item img {
  width: 100%;
  font-size: 0;
}

.grid-item {
  background: #dedede;
  border: 4px solid #131418;
	box-sizing: border-box;
}

@media (min-width: 0px) {
  .grid-item {
    width: 100%;
  }
}

@media (min-width: 500px) {
  .grid-item {
    width: 50%;
  }
}

@media (min-width: 1000px) {
  .grid-item {
    width: 33.333%;
  }
}

@media (min-width: 2160px) {
  .grid-item {
    width: 25%
  }
}

.text-wrapper {
  padding: 15px;
  text-align: justify;
}

JavaScript

// Stand-alone. 

// Masonary library courtesy of Desandro @ https://masonry.desandro.com