JSFiddle - React, Tailwind, and code Playground

by crowjonah

HTML

<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<div id="container" style="margin-left:-10px">
    <div class="infoBox" style="height: 200px; margin-left:9px">
        Content goes here for basic info
    </div>
    <div class="infoBox" style="margin-left:9px; height: 75px;">
        Content goes here for contact info
    </div>
    <div class="infoBox" style="margin-left:9px; height: 200px;">
        Content goes here for latest photos
    </div>
    <div class="infoBox" style="margin-left:9px; height: 400px;">
        Content goes here for latest videos
    </div>
</div>

CSS

#container {width:480px;}
.infoBox {
    width: 220px;
    margin: -1px; 
    background-color:#37312d;
    padding:5px;
    border:#5b504a solid 1px;
    margin-bottom:9px;
    float:left;
}

JavaScript

$(function(){
  $('#container').masonry({
    // options
    itemSelector : '.infoBox',
    columnWidth : 240
  });
});