JSFiddle - React, Tailwind, and code Playground

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 info1
    </div>
    <div class="infoBox" style="margin-left:9px; height: 75px;">
        Content goes here for contact info2
    </div>
    <div class="infoBox" style="margin-left:9px; height: 200px;">
        Content goes here for latest photos3
    </div>
    <div class="infoBox" style="margin-left:9px; height: 400px;">
        Content goes here for latest videos4
    </div>
</div>

CSS

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