JSFiddle - React, Tailwind, and code Playground

by joelpurra

HTML

<script src="https://raw.github.com/razorjack/quicksand/master/jquery.quicksand.js"></script>
<div>
   <button id="show-all">
       Show all
    </button>
   <button id="show-some">
       Show some
    </button>
</div>

<div class="demo">
    <ul class="colors that-you-can-see">
  <li id="ce83f2f" style="background: #e83f2f"></li>
  <li id="c174876" style="background: #174876"></li>
  <li id="cffc223" style="background: #ffc223"></li>
    </ul>
    
    <ul class="colors some">
  <li id="c174876" style="background: #174876"></li>
  <li id="c788b6f" style="background: #788b6f"></li>
  <li id="cffdb59" style="background: #ffdb59"></li>
    </ul>
    
    <ul class="colors all">
  <li id="c463033" style="background: #463033"></li>
  <li id="c77343d" style="background: #77343d"></li>
  <li id="ce83f2f" style="background: #e83f2f"></li>
  <li id="cffc223" style="background: #ffc223"></li>
  <li id="cffdb59" style="background: #ffdb59"></li>
  <li id="c788b6f" style="background: #788b6f"></li>
  <li id="c486a5e" style="background: #486a5e"></li>
  <li id="c289539" style="background: #289539"></li>
  <li id="c174876" style="background: #174876"></li>
  <li id="c62164e" style="background: #62164e"></li>
  <li id="c86286e" style="background: #86286e"></li>
  <li id="cda79c2" style="background: #da79c2"></li>
  <li id="cf39079" style="background: #f39079"></li>
  <li id="ce83f2f" style="background: #e83f2f"></li>
  <li id="cffc223" style="background: #ffc223"></li>
  <li id="cffdb59" style="background: #ffdb59"></li>
  <li id="cf2c478" style="background: #f2c478"></li>
    </ul>
</div>

CSS

.demo .colors {
  overflow: hidden;
  margin: 20px 0;
  padding-left: 55px;
}

.demo .colors li {
  display: block;
  width: 96px;
  height: 96px;
  margin: 10px;
  float: left;
  border: 16px solid;
}

.demo .all,
.demo .some {
  display: none;
}

JavaScript

$(function() {
    $("#show-some").click(function(e) {
        $('.demo .that-you-can-see').quicksand($(".demo .some li"), {
            duration: 1000,
            attribute: 'id',
            easing: 'swing'
        });
    });

    $("#show-all").click(function(e) {
        $('.demo .that-you-can-see').quicksand($(".demo .all li"), {
            duration: 1000,
            attribute: 'id',
            easing: 'swing'
        });
    });
});