JSFiddle - React, Tailwind, and code Playground

by Hastig Z

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.js"></script>
<!-- fiddle written for stack overflow question regarding the centering of masonry -->
<!-- http://stackoverflow.com/questions/20390689/how-to-center-masonry-container -->

<div class="masonry-container js-masonry"  data-masonry-options='{ "isFitWidth": true }'>
	<div class="image-div">
		<img class="image" src="" style="width: 200px; height: 100px;">
	</div>
    <div class="image-div">
		<img class="image" src="" style="width: 200px; height: 200px;">
	</div>
    <div class="image-div">
		<img class="image" src="" style="width: 200px; height: 300px;">
	</div>
    <div class="image-div">
		<img class="image" src="" style="width: 200px; height: 400px;">
	</div>
    <div class="image-div">
		<img class="image" src="" style="width: 200px; height: 500px;">
	</div>
    <div class="image-div">
		<img class="image" src="" style="width: 200px; height: 200px;">
	</div>
	<div class="image-div">
		<img class="image" src="" style="width: 200px; height: 100px;">
	</div>
    <div class="image-div">
		<img class="image" src="" style="width: 200px; height: 500px;">
	</div>
    <div class="image-div">
		<img class="image" src="" style="width: 200px; height: 400px;">
	</div>
    <div class="image-div">
		<img class="image" src="" style="width: 200px; height: 600px;">
	</div>
    <div class="image-div">
		<img class="image" src="" style="width: 200px; height: 200px;">
	</div>
    <div class="image-div">
		<img class="image" src="" style="width: 200px; height: 300px;">
	</div>
	<div class="image-div">
		<img class="image" src="" style="width: 200px; height: 80px;">
	</div>
	<div class="image-div">
		<img class="image" src="" style="width: 200px; height: 130px;">
	</div>
    <div class="image-div">
		<img class="image" src="" style="width: 200px; height: 420px;">
	</div>
    <div class="image-div">
		<img class="image" src="" style="width: 200px; height: 330px;">
	</div>
    <div...

CSS

.masonry-container {
	margin: 0 auto; /* this is the css that keeps the container centered in page */
}

.image-div {
	float: left;
	width: 230px;
	margin: 5px;
	font-size: 0; /* removes white space on bottom */
}

.image {
	width: 230px; /* this is overridden by inline styles for example purposes */
	height: auto; /* this is overridden by inline styles for example purposes */
}