JSFiddle - React, Tailwind, and code Playground

by gopi1410

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="main">
        <div id="header">
            <div id="logo">
                <img src="http://h4ckcod3r.in/www/isotope/images/logo.png" />
            </div>
            <div id="user">
            
            </div>
        </div>
        <div id="tiles">
            <div id="container">
                <div class="item home">
                    <img src="http://h4ckcod3r.in/www/isotope/images/1.png" />
                </div>
                <div class="item home">
                    <img src="http://h4ckcod3r.in/www/isotope/images/2.png" />
                </div>
                <div class="item home">
                    <img src="http://h4ckcod3r.in/www/isotope/images/5.png" />
                </div>
            </div>
    </div>
</div>

CSS

/*#header {
    text-align: left;
}
.home {
    cursor: pointer;
}
a:hover {
    color: white;
}*/

body {
    margin:0;
    padding:0;
}
#main {
    background-color:black;
    width:100%;
    height:100%;
    color:white;
}
#header {
    /*background-color: red;*/
    width: 100%;
    height: 16%;
}
#header #logo {
    float: left;
}
#header #logo img {
    height:100%;
}
#header #user {
    float:right;
}
#tiles {
    margin-top: 70px;
    width: 100%;
    height: 84%;
    /*background-color:red;*/
}



/**** Isotope styles ****/
/* required for containers to inherit vertical size from window */
html,
body {
  height: 100%;
}
#container {
    border: 1px solid #666;
    padding: 5px;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
    background-color:white;
}
.item {
    float: left;
    overflow: hidden;
    position: relative;
    
    background: #888;
    color: #222;
    -webkit-border-radius: 1.2em;
    -moz-border-radius: 1.2em;
    border-radius: 1.2em;
}





/* Start: Recommended Isotope styles */

/**** 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:        ...

JavaScript

$(function() {
    var $container = $('#container');
    $container.isotope({
        itemSelector: '.item'
    });
});