JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<script src="https://npmcdn.com/isotope-packery@2/packery-mode.pkgd.js"></script>
<script src="https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<div class="clients">
 <div class="clients-holder">
 
  <div class="client big">1</div>
  <div class="client  big">2</div>
  <div class="client ">3</div>
  <div class="client ">4</div>
  <div class="client big">5</div>
  <div class="client  big">6</div>
  <div class="client big">7</div>
  <div class="client ">8</div>
  <div class="client ">9</div>
  <div class="client big">10</div>
  <div class="client ">11</div>
  <div class="client ">12</div>
</div>
 
</div>

CSS

* { box-sizing: border-box; }

body {
  font-family: sans-serif;
}

 

.clients {
  border: 1px solid #333;
  margin:auto;
  text-align:center;
  margin:auto; 
  width:500px;
} 

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

.clients-holder{ background-color:pink; position:absolute;width:300px; height:300px}
/* ---- .element-item ---- */

.client {
  position: relative; 
  width: 140px;
  height: 140px;
  margin: 5px;
  padding: 10px;
  background: red;
  color: white;
  font-size: 50px;
}

.big { width: 290px; min-height:290px}

JavaScript

// external js: isotope.pkgd.js, cells-by-column.js, cells-by-row.js, fit-columns.js, horizontal.js, masonry-horizontal.js

// init Isotope
 jQuery('.clients').isotope({
  itemSelector: '.client',
  layoutMode: 'masonry',
  masonry: {
    columnWidth: 150
  },
  cellsByRow: {
    columnWidth: 220,
    rowHeight: 220
  },
  masonryHorizontal: {
    rowHeight: 150
  },
  cellsByColumn: {
    columnWidth: 300,
    rowHeight: 300
  }
});