JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="main">
<div id="container">
<div id="id1" class="item home">
</div>
<div id="id2" class="item home">
</div>
<div id="id3" class="item home">
</div>
</div>
</div>
CSS
html,
body {
height: 100%;
}
#container {
border: 1px solid #666;
padding: 5px;
margin-bottom: 20px;
}
.element {
margin: 5px;
float: left;
overflow: hidden;
position: relative;
-webkit-border-top-right-radius: 1.2em;
-moz-border-radius-topright: 1.2em;
border-top-right-radius: 1.2em;
}
#id1 {
width:140px;
height: 200px;
background-color:red;
}
#id2 {
width: 290px;
height: 240px;
background-color:yellow;
}
#id3 {
width: 100px;
height: 180px;
background-color:blue;
}
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: top, left, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
JavaScript
$(function() {
var $container = $('#container');
$container.isotope({
masonry: {columnWidth: 10},
itemSelector: '.item'
});
});