JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

HTML

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
    <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

CSS

section {
  column-gap: 1rem;
  column-count: 5;
}

div {
  page-break-inside: avoid;
  break-inside: avoid-column;
  box-sizing: border-box;
  margin-bottom: 1rem;
}

JavaScript

const colors = ['#007a92', '#00e992', '#ffe992', '#ff4492', '#264492']
const heights = ['200px', '400px', '100px', '50px']
const random = arr =>arr[Math.floor(Math.random()*arr.length)];

[...document.querySelectorAll('div')].forEach(div => Object.assign(div.style, {
  backgroundColor: random(colors),
  height: random(heights)
}))