JSFiddle - React, Tailwind, and code Playground

HTML

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

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item">
    <a href="#">
      <div class="brightness">
        <img src="https://images.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="...">
      </div>
    </a>
  </div>

  <div class="grid-item">
    <a href="#">
      <div class="brightness">
        <img src="https://images.pexels.com/photos/147504/pexels-photo-147504.jpeg" alt="...">
      </div>
    </a>
  </div>

  <div class="grid-item">
    <a href="#">
      <div class="brightness">
        <img src="https://images.pexels.com/photos/271560/pexels-photo-271560.jpeg" alt="...">
      </div>
    </a>
  </div>
    <div class="grid-item">
    <a href="#">
      <div class="brightness">
        <img src="https://images.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="...">
      </div>
    </a>
  </div>
  <div class="grid-item">
    <a href="#">
      <div class="brightness">
        <img src="https://images.pexels.com/photos/271560/pexels-photo-271560.jpeg" alt="...">
      </div>
    </a>
  </div>
  <div class="grid-item">
    <a href="#">
      <div class="brightness">
        <img src="https://images.pexels.com/photos/147504/pexels-photo-147504.jpeg" alt="...">
      </div>
    </a>
  </div>

</div>

CSS

* { box-sizing: border-box; }

/* force scrollbar */
html { overflow-y: scroll; }

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
  background: #DDD;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 33.333%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}


/* masonry */
.grid-item {
  border: 2px solid hsla(0, 0%, 0%, 0.5);
}

.grid-item--width2 { width: 300px; }
.grid-item--height2 { height: 400px; }

/* mouseover jpg */
.brightness {
    background-color: white;
    display: inline-block;
}
.brightness img:hover {
    opacity: .5;
}
.brightness img {
    max-width: 100%;
}

JavaScript

var $grid = $('.grid').masonry({
  itemSelector: '.grid-item',
  percentPosition: true,
  columnWidth: '.grid-sizer'
});