JSFiddle - React, Tailwind, and code Playground

by Brock Callahan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
<div class="container">
  <img src="http://placehold.it/200x200" alt="">
  <img src="http://placehold.it/200x200" alt="">
  <img src="http://placehold.it/200x200" alt="">
  <img src="http://placehold.it/200x200" alt="">
  <img src="http://placehold.it/200x200" alt="">
  <img src="http://placehold.it/200x700" alt="">
  <img src="http://placehold.it/200x200" alt="">
  <img src="http://placehold.it/200x200" alt="">
  <img src="http://placehold.it/100x200" alt="">
  <img src="http://placehold.it/200x200" alt="">
  <img src="http://placehold.it/200x200" alt="">
  <img src="http://placehold.it/500x100" alt="">
  <img src="http://placehold.it/200x200" alt="">
  <img src="http://placehold.it/200x300" alt="">
  <img src="http://placehold.it/300x200" alt="">
  <img src="http://placehold.it/200x500" alt="">
  <img src="http://placehold.it/400x200" alt="">
  <img src="http://placehold.it/200x600" alt="">
  <img src="http://placehold.it/200x200" alt="">
  <img src="http://placehold.it/200x200" alt="">
</div>

CSS

img {
  margin: 5px;
}

JavaScript

$(".container").masonry({
    columnWidth: "img",
    itemSelector: "img"
});