JSFiddle - React, Tailwind, and code Playground

by Nikola Mihin

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/5.2.1/shuffle.js"></script>
<div id="products-index" class="row shuffle" data-category-id="71" data-products-per-page-desktop="18" data-products-per-page-mobile="12" style="position: relative; overflow: hidden; height: 1349.62px; transition: height 500ms cubic-bezier(0.4, 0, 0.2, 1) 0s;">
  <div id="207" data-sort="1" class="products-index-item col-12 col-md-4 shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(0px, 0px) scale(1); transition-duration: 500ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
    <div class="product-tile">
      <a href="/products/classroom/tables-desks/classroom-tables/half-circle-classroom-table/c-24/c-71/p-207">
        <div class="image">
          <img src="http://cpdev.coria.com/-/media/Images/Various-Test-Images/Half-Circle-Classroom-Table.ashx?la=en&amp;h=400&amp;w=500&amp;mw=500&amp;hash=8F57478CE2250EE9C6452508B7A7007E" alt=""> </div>
        <div class="text">
          <h2>
            Half Circle Classroom Table </h2>
          <div class="description">
            <p class="price"></p>
            <p class="options-text">More Height &amp; Size Options</p>
          </div>
        </div>
      </a>
    </div>
  </div>
  <div id="252" data-sort="2" class="products-index-item col-12 col-md-4 shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(273px, 0px) scale(1); transition-duration: 500ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
    <div class="product-tile">
      <a href="/products/classroom/tables-desks/classroom-tables/half-moon-classroom-table/c-24/c-71/p-252">
     ...

JavaScript

var Shuffle = window.Shuffle;
var element = document.querySelector('#products-index');

var shuffleInstance = new Shuffle(element, {
  itemSelector: '.products-index-item'
});