JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<body>

<div id="masonry">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>



    <div id="container" class="clearfix masonry">
        <div class="item1">1 (1)</div>
        <div class="item3">2 (3)</div>
        <div class="item2">3 (2)</div>
        <div class="item2">4 (2)</div>
        <div class="item2">5 (2)</div>
        <div class="item2">6 (2)</div>
        <div class="item4">7 (3)</div>
        <div class="item1">8 (1)</div>
        <div class="item3">9 (3)</div>
    </div>
    
    
</body>

CSS

/*
#contaner {
    width: 900px;
}

#container > div {
    background-color: #f00;
    margin: 5px;
    }
.item1 {
    width:410px;
    height: 200px;

}
.item2 {
    width: 200px;
    height: 410px;

}
.item3 {
    width: 200px;
    height: 200px;

}
.item4 {
    width: 410px;
    height: 410px;

}*/

div#masonry {
	display: -ms-flexbox;
	-ms-flex-direction: column;
	-ms-flex-wrap: wrap;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	height: 100vw;
	font-size: 0; 
  background-color: #f00;
}
div#masonry div { 
	width: 33.3%;
	transition: .8s opacity;
}
div#masonry:hover div {
	opacity: 0.3;
}
div#masonry:hover div:hover {
	opacity: 1;
}

JavaScript

$(function () {
      $('#container').masonry({
          columnWidth: 1,
          itemSelector: 'div'
      });
  });