JSFiddle - React, Tailwind, and code Playground

by Ishank Dubey

HTML

<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<div data-role="page" id="p1">
    <div data-role="header">
        <h1>Devranjani Music School</h1> 
    </div>
    <div data-role="content" style="background-image:url('http://images4.fanpop.com/image/photos/24100000/music-notes-wallpaper-music-24113988-1600-1200.jpg');width:100%;height:1000px;">
        <div id="aboutus" style="margin-top:0px;width:95%; height:200px;background-image:url('http://images4.fanpop.com/image/photos/24100000/music-notes-wallpaper-music-24113988-1600-1200.jpg');"><p id="aboutusText" style="font-size:15px;color:white;margin-top:80px;position:absolute;"><b>About:</b><br/>Blah Blah Blah Blah Blah Blah Blah </p></div>
        <div id="container" style="background-color:" class="masonry">
        <div style="text-align:center;font-size:12px;"class="item"><span style="margin:10px10px;">Gallery 1</span></div>
        <div style="text-align:center;font-size:12px;"class="item"><span>Gallery 2</span></div>
        <div style="text-align:center;font-size:12px;"class="item"><span>Gallery 3</span></div>
        <div style="text-align:center;font-size:12px;"class="item"><span>Gallery 4</span></div>      
        </div>
    </div>
    <div data-role="footer" data-position="fixed">
        <h4>Contact us at: [email protected]</h4></div>
</div>

CSS

#container {
   // border: 1px solid;
    padding: 5px;
}
.item {
    box-shadow: 5px 5px 5px #888888;
    width: 200px;
    height: 200px;
    display:inline-block;
    
    margin: 10px 10px;
    background: #CCC;
    cursor:pointer;
}

.item {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
      -ms-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}
.masonry,
.item {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}
.masonry,
 .item {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
      -ms-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}

JavaScript

$( function() {

    $('#container').masonry({
        itemSelector: '.item'
         columnWidth: 70,
        isAnimated:true
       
    });

});