JSFiddle - React, Tailwind, and code Playground

by matmuchrapna

HTML

<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<div class="wrap">
    <div class="block block_vertical"></div>    
    <div class="block"></div>
    <div class="block"></div>
    <div class="block block_vertical"></div>
    <div class="block block_vertical"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block block_vertical"></div>
    <div class="block"></div>
    <div class="block block_vertical"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block block_vertical"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

CSS

/**
 * all your need is boobs
 */

.wrap {
    background: yellow;
    margin: 50px auto;
    width: 440px;
    padding-bottom: 1%;
    overflow: hidden;
}

.block {
    float: left;
    background: red;
    width: 210px;
    height: 40px;
    margin: 5px 5px 0;
}

.block_vertical {
    height: 70px
}

JavaScript

$(function(){
    $('.wrap').masonry({
        itemSelector : '.block'
    });
});