JSFiddle - React, Tailwind, and code Playground

by Dean_Wilson

HTML

<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
    <div class="container">        
        
        <div class="box col1" style="height:320px";></div> 
        <div class="box col2" style="height:410px";></div> 
        <div class="box col2" style="height:200px";></div> 
        <div class="box col2" style="height:180px";></div> 
        <div class="box col2" style="height:280px";></div>
        <div class="box col4" style="height:320px";></div> 
        <div class="box col2" style="height:410px";></div> 
        <div class="box col2" style="height:200px";></div> 
        <div class="box col2" style="height:180px";></div> 
        <div class="box col2" style="height:280px";></div>
        <div class="box col2" style="height:320px";></div> 
        <div class="box col2" style="height:410px";></div> 
        <div class="box col2" style="height:200px";></div> 
        <div class="box col2" style="height:180px";></div> 
        <div class="box col2" style="height:280px";></div>

    </div>

CSS

.box {
    margin: 5px;
    padding: 5px;
    background: #D8D5D2;
    font-size: 11px;
    line-height: 1.4em;
    float: left;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color:#cecece;
}
.col1 {
    width: 80px;
}
.col2 {
    width: 180px;
}
.col3 {
    width: 280px;
}
.col4 {
    width: 380px;
}
.col1 img {
    max-width: 80px;
}
.col2 img {
    max-width: 180px;
}
.col3 img {
    max-width: 280px;
}
.col4 img {
    max-width: 380px;
}
.col5 img {
    max-width: 480px;
}
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* @end */

JavaScript

$(function(){
    
    $('.container').masonry({
      itemSelector: '.item',
      columnWidth: 220,
        gutterWidth: 20,
      isFitWidth: true,
      isAnimated: true,
      animationOptions: {
        duration: 150
      }
    });
      
  });