JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/GBKS/Wookmark-jQuery/master/jquery.wookmark.min.js"></script>
<div id="main" role="main">

      <ul id="tiles">
        <!-- These are our grid blocks -->
        <li><img src="https://raw.github.com/GBKS/Wookmark-jQuery/master/sample-images/image_1.jpg" width="200" height="283"><p>1</p></li>
        <li><img src="https://raw.github.com/GBKS/Wookmark-jQuery/master/sample-images/image_2.jpg" width="200" height="300"><p>2</p></li>
        <li><img src="https://raw.github.com/GBKS/Wookmark-jQuery/master/sample-images/image_3.jpg" width="200" height="252"><p>3</p></li>
        <li><img src="https://raw.github.com/GBKS/Wookmark-jQuery/master/sample-images/image_4.jpg" width="200" height="158"><p>4</p></li>
        <li><img src="https://raw.github.com/GBKS/Wookmark-jQuery/master/sample-images/image_5.jpg" width="200" height="300"><p>5</p></li>
        <li><img src="https://raw.github.com/GBKS/Wookmark-jQuery/master/sample-images/image_6.jpg" width="200" height="297"><p>6</p></li>
        <li><img src="https://raw.github.com/GBKS/Wookmark-jQuery/master/sample-images/image_7.jpg" width="200" height="200"><p>7</p></li>
        <li><img src="https://raw.github.com/GBKS/Wookmark-jQuery/master/sample-images/image_8.jpg" width="200" height="200"><p>8</p></li>
        <li><img src="https://raw.github.com/GBKS/Wookmark-jQuery/master/sample-images/image_9.jpg" width="200" height="398"><p>9</p></li>
        <li><img src="https://raw.github.com/GBKS/Wookmark-jQuery/master/sample-images/image_10.jpg" width="200" height="267"><p>10</p></li>
        <li><img src="https://raw.github.com/GBKS/Wookmark-jQuery/master/sample-images/image_1.jpg" width="200" height="283"><p>11</p></li>
        <li><img src="https://raw.github.com/GBKS/Wookmark-jQuery/master/sample-images/image_2.jpg" width="200" height="300"><p>12</p></li>
        <li><img src="https://raw.github.com/GBKS/Wookmark-jQuery/master/sample-images/image_3.jpg" width="200"...

CSS

/** General page styling **/
html {
  background-color: #e5e5e5;
  font-family: "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif;
}

#main {
  margin: 30px 0;
  position: relative;
}

header h1 {
  text-align: center;
  font-size: 30px;
  font-weight: 200;
  margin: 30px 0 10px 0;
}

header p {
  text-align: center;
  font-size: 14px;
  color: #666666;
  margin: 0;
  font-weight: 200;
}

/**
* Grid container
*/
#tiles {
  list-style-type: none;
  position: relative; /** Needed to ensure items are laid out relative to this container **/
  margin: 0;
  padding: 0;
}

/**
* Grid items
*/
#tiles li {
  width: 200px;
  background-color: #ffffff;
  border: 1px solid #dedede;
          border-radius: 2px;
     -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  display: none; /** Hide items initially to avoid a flicker effect **/
  cursor: pointer;
  padding: 4px;
}

#tiles li.inactive {
  visibility: hidden;
  opacity: 0;
}

#tiles li img {
  display: block;
}

/**
* Grid item text
*/
#tiles li p {
  color: #666;
  font-size: 13px;
line-height: 20px;
text-align: center;
font-weight: 200;
  margin: 7px 0 2px 7px;
}

footer {
  text-align: center;

}

footer a {
  color: #435DC5;
  text-decoration: none;
}

/**
* Progress bar for imagesLoaded
*/
.progress-bar {
  background-color: #0BC20B;
  height: 2px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 0;
  box-shadow: 0 1px 3px rgba(11, 194, 11, 0.2);
  -webkit-transition: width 0.3s ease-out;
     -moz-transition: width 0.3s ease-out;
       -o-transition: width 0.3s ease-out;
          transition: width 0.3s ease-out;
}

/**
* Placerholder css
*/
.wookmark-placeholder {
          border-radius: 2px;
     -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  background-color: #eee;
  border: 1px solid #dedede;
  z-index: -1;
}

.example-tiles {
  position: relative; /** Needed to ensure items are laid out relative to this container **/
  margin: 0;
  padding: 0;
}

.example-tiles li {
...

JavaScript

var handler = $('#tiles li');

      handler.wookmark({
          // Prepare layout options.
          autoResize: true, // This will auto-update the layout when the browser window is resized.
          container: $('#main'), // Optional, used for some extra CSS styling
          offset: 5, // Optional, the distance between grid items
          outerOffset: 10, // Optional, the distance to the containers border
          itemWidth: 210 // Optional, the width of a grid item
      });