JSFiddle - React, Tailwind, and code Playground

by vanduzled

HTML

<script src="http://isotope.metafizzy.co/isotope.pkgd.min.js"></script>
<script src="https://raw.githubusercontent.com/kenwheeler/slick/master/slick/slick.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/kenwheeler/slick/master/slick/slick.css">
<div id="container">
    <div class="grid-sizer"></div>
    <div class="gutter-sizer"></div>
    <div class="item"></div>
    <div class="item w3">
        <div class="carousel-item">
            <div>
                <img src="http://placehold.it/587x200/fff000/ffffff" alt="M Moser Associates" />
            </div>
            <div>
                <img src="http://placehold.it/587x200/ff0000/ffffff" alt="M Moser Associates" />
            </div>
            <div>
                <img src="http://placehold.it/587x200/deff00/ffffff" alt="M Moser Associates" />
            </div>
        </div>
    </div>
    <div class="item w2"></div>
    <div class="item w2"></div>
    <div class="item h2"></div>
    <div class="item w3"></div>
    <div class="item w3"></div>
    <div class="item w2"></div>
    <div class="item w2"></div>
</div>

CSS

#container {
    width: 900px;
}
.item {
    float: left;
    height: 200px;
    background: blue;
    margin-bottom: 1%;
    overflow: hidden;
}
.gutter-sizer {
    width: 1%;
}
.item, .grid-sizer {
    width: 24%;
}
.item.w2 {
    width: 49%;
    background: red
}
.item.w3 {
    width: 74%;
}
.item.w4 {
    width: 99%;
}
.item.h2 {
    height: 400px;
}

JavaScript

var $container = $('#container');
  // init
  $container.isotope({
      // options
      masonry: {
          columnWidth: '.grid-sizer',
          gutter: '.gutter-sizer'
      },
      itemSelector: '.item'
  });


  $(document).ready(function () {

      $('.carousel-item').slick({
          autoplay: true,
          dots: false,
          fade: true,
          infinite: true,
          speed: 600
      });

  });