JSFiddle - React, Tailwind, and code Playground

HTML

<div class="masonry-container">
   <img class="masonry-brick" src="https://www.w3schools.com/w3css/img_lights.jpg">
   <img class="masonry-brick" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYXVTbxmHQuOogxDeNx7U6z7neHX4kOQPZEBLG5nzQZoMMhkFN">
   <img class="masonry-brick" src="https://www.jqueryscript.net/images/Smooth-CSS3-Animated-Slideshow-Plugin-With-jQuery-Image-Carousel.jpg">
   <img class="masonry-brick" src="http://www.abc.net.au/news/image/9131708-3x2-940x627.jpg">
   <img class="masonry-brick" src="https://i.gifer.com/PL7r.gif">
   <img class="masonry-brick" src="https://images.pexels.com/photos/658687/pexels-photo-658687.jpeg?auto=compress&cs=tinysrgb&h=350">
   <img class="masonry-brick" src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg">
</div>

CSS

.masonry-brick {
    color: #FFF;
    background-color: #FF00D8;
    display: inline-block;
    width: 100%;
    margin: 5px; /* for separating masonry-bricks vertically*/
}

@media only screen and (min-width: 480px) {
    .masonry-container {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 768px) {
    .masonry-container {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 960px) {
    .masonry-container {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        /* display: grid; */
        column-count: 5;
    }
}