JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="wrapper">
    <div class="item" style="height: 400px; background-color: #ddd"></div>
    <div class="item" style="height: 200px; background-color: #000"></div>
    <div class="item" style="height: 200px; background-color: #ececec"></div>
    <div class="item" style="height: 700px; background-color: #DC0F0F"></div>
    <div class="item" style="height: 400px; background-color: #B429A2"></div>
    <div class="item" style="height: 200px; background-color: #009EBA"></div>
    <div class="item" style="height: 200px; background-color: #694141"></div>
    <div class="item" style="height: 400px; background-color: #29B436"></div>
    <div class="item" style="height: 200px; background-color: #74B2BD"></div>
    <div class="item" style="height: 700px; background-color: #DCDA0F"></div>
</div>

CSS

.wrapper {
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
  column-count: 3;
 -webkit-column-gap: 0; /* Chrome, Safari, Opera */
 -moz-column-gap: 0; /* Firefox */
  column-gap: 0;
  width: 100vw;
}

.wrapper div {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}