JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item is-tall"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item is-tall"></div>
  <div class="grid-item is-tall"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

SASS

body
  background-color: #303030

.grid-item
  width: 200px
  height: 200px
  background-color: #72A276
  border: 1px solid #000000
  border-radius: 0.5rem
  margin-bottom: 1rem
  
  &.is-tall
    height: 400px
    background-color: #0E7C7B

JavaScript

const grid = document.querySelector('.grid')
const msnry = new Masonry( grid, {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 20
})