JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<script src="http://vnjs.net/www/project/freewall/freewall.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-12">
		<div id="freewall" class="free-wall">
            <!-- full width brick -->
			<div class="brick size-full-width">
                <p>Full Width</p>
			</div>
            <!-- half width brick -->
			<div class="brick size-half-width">
                <p>Half Width</p>
			</div>
            <!-- half width brick -->
			<div class="brick size-half-width">
                <p>Half Width</p>
			</div>
            <!-- third width brick -->
			<div class="brick size-third-width">
                <p>Third Width</p>
			</div>
            <!-- twothird width brick -->
			<div class="brick size-twothird-width">
                <p>Two Third Width</p>
			</div>
        </div>
    </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.container {
    margin-top: 20px;
}

.free-wall {
    margin: auto;
}

.brick {
    background: #ddd;
    font-size: 16px;
    padding: 12px;
}

.size-full-width {
	width: 100%;
	height: 168px;
}
.size-twothird-width {
    width: 75%;
    height: 168px;
}
.size-half-width {
	width: 50%;
	height: 168px;
}
.size-third-width {
    width: 25%;
    height: 168px;
}

JavaScript

$(function() {
				wall = new freewall('.free-wall');
				
				wall.reset({
					selector: '> div',
					animate: false,
					cellW: 168,
					cellH: 168,
					gutterY: 12,
					gutterX: 12,
					draggable: true,
					onResize: function() {
						wall.refresh();
					}
				});
				wall.fitWidth();
			});