JSFiddle - React, Tailwind, and code Playground

by Fatih Kadir Akın

HTML

<link rel="stylesheet" href="https://npmcdn.com/bricklayer/dist/bricklayer.css">
<script src="https://npmcdn.com/bricklayer/dist/bricklayer.min.js"></script>
<script src="https://rawgit.com/f/da7d3dc85936e1186f76f1f726870ddc/raw/60a2002cbbb17ead43a43922076988287facc44e/box.js"></script>
<!-- Bricklayer needs to have "bricklayer" class name. -->
<div class="bricklayer" id="my-bricklayer">
  <!-- You can put elements directly into the bricklayer container. Bricklayer will automatically divide them into columns. Here some static elements -->
  <div class="box" style="background-color: red; height: 100px"></div>
  <div class="box" style="background-color: green; height: 70px"></div>
  <div class="box" style="background-color: blue; height: 30px"></div>
  <div class="box" style="background-color: orange; height: 40px"></div>
</div>

CSS

/* Bricklayer calculates its column sizes  from the `bricklayer-column-sizer` element. You can give it some width with media queries to make it responsive */
@media screen and (min-width: 300px) {
  .bricklayer-column-sizer {
    /* If page is greater than 300px, columns will be 20% wide. */
    width: 20%;
  }
}

@media screen and (min-width: 400px) {
  .bricklayer-column-sizer {
    /* If page is greater than 400px, columns will be 10% wide, which are more narrow. */
    width: 10%;
  }
}

@media screen and (min-width: 700px) {
  .bricklayer-column-sizer {
    /* If page is greater than 700px, columns will be 5% wide. That means there will be lots of columns */
    width: 5%;
  }
}

.box {
  margin: 10px 0;
}

JavaScript

// You have to create a `Bricklayer` instance for every Bricklayer container you have.
var bricklayer = new Bricklayer(document.getElementById('my-bricklayer'))

// You can delete these lines, these adds dynamic bricklayers to make you understand how it works.
for (var i = 0; i < 20; i++) {
  bricklayer.append(box())
}

// Did you see a box looks like "/"?
var anotherBox = box()
anotherBox.style.transform = "rotate(10deg)"
bricklayer.append(anotherBox)