JSFiddle - React, Tailwind, and code Playground

HTML

<section id='works'>
  <section class='cols'>
    <article class='h_10'></article>
    <article class='h_50'></article>
    <article></article>
    <article class='h_30'></article>
    <article class='h_50'></article>
    <article></article>
    <article class='h_30'></article>
    <article class='h_30'></article>
    <article class='h_150'></article>
    <article></article>
    <article class='h_10'></article>
  </section>
  <section id='content'></section>
  <section class='cols'>
    <article class='h_10'></article>
    <article></article>
    <article></article>
    <article></article>
    <article class='h_50'></article>
    <article class='h_150'></article>
    <article class='h_50'></article>
    <article class='h_50'></article>
    <article class='h_30'></article>
  </section>
</section>

CSS

#content {
  display: block;
  background: green;
  width: 100%;
  height: 100px;
}

#works {
  display: block;
  width: 500px;
  background: red;
  margin: auto;
}

.cols {
  -webkit-column-count: 4;
	-moz-column-count: 4;
	column-count: 4;
	
	-webkit-column-gap: 0;
	-moz-column-gap: 0;
	column-gap: 0;  
}

#works article {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: blue;
  margin: 10px;
}

#works article.h_10 {
  height: 10px;
}

#works article.h_30 {
  height: 30px;
}

#works article.h_50 {
  height: 50px;
}

#works article.h_150 {
  height: 150px;
}