JSFiddle - React, Tailwind, and code Playground

masonry test

by oktaviardi pratama

HTML

<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<div class="wall">
    <div class="box"></div>
    <div class="box b"></div>
    <div class="box"></div>
    <div class="box b"></div>
    <div class="box b"></div>
    <div class="box"></div>
    <div class="box c"></div>
    <div class="box"></div>
    <div class="box c"></div>
    <div class="box b"></div>
    <div class="box"></div>
    <div class="box c"></div>
    <div class="box b"></div>
</div>

CSS

.box {
   background-color: purple;
   text-align: center;
   border: 4px solid aquamarine;
   height: 250px;
   width: 250px;
   float: left;
   margin: 5px;
}

.box.b {
  background-color: yellowgreen;
  text-align: center;
  border: 4px solid pink;
  height: 400px;
  width: 250px;
  float: left;
  margin: 5px;
}
.box.c {
  background-color: red;
  text-align: center;
  border: 4px solid yellow;
  height: 400px;
  width: 250px;
  float: left;
  margin: 5px;
}

JavaScript

var container = document.querySelector('.wall');
var msnry = new Masonry( container, {
    // options
    columnWidth: 20,
    itemSelector: '.box'
})