JSFiddle - React, Tailwind, and code Playground

by Oleg Khobotov

HTML

<div data-eq-pts="big: 100"></div>
<div data-eq-pts="big: 100"></div>
<div data-eq-pts="big: 100"></div>
<div data-eq-pts="big: 100"></div>
<div data-eq-pts="big: 100"></div>
<div data-eq-pts="big: 100"></div>
<div data-eq-pts="big: 100"></div>
<div data-eq-pts="big: 100"></div>
<div data-eq-pts="big: 100"></div>
<div data-eq-pts="big: 100"></div>

CSS

div {
  float: left;
  box-sizing: border-box;
  width: 10%;
  height: 20px;
  border: 1px solid white;
  background-color: red;
  }

div[data-eq-state$="big"] {
  background-color: green;
  }

JavaScript

/*
 * The global eqjs object that contains all eq.js functionality.
 *
 * eqjs.nodes - List of all nodes to act upon when eqjs.states is called
 * eqjs.nodesLength - Number of nodes in eqjs.nodes
 *
 * eqjs.refreshNodes - Call this function to refresh the list of nodes that eq.js should act on
 * eqjs.sortObj - Sorts a key: value object based on value
 * eqjs.query - Runs through all nodes and finds their widths and points
 * eqjs.nodeWrites - Runs through all nodes and writes their eq status
 */
(function (eqjs) {
  'use strict';

  function EQjs() {
    this.nodes = [];
    this.eqsLength = 0;
    this.widths = [];
    this.points = [];
    this.callback = undefined;
  }

  /*
   * Add event (cross browser)
   * From http://stackoverflow.com/a/10150042
   */
  function addEvent(elem, event, fn) {
    if (elem.addEventListener) {
      elem.addEventListener(event, fn, false);
    } else {
      elem.attachEvent('on' + event, function () {
        // set the this pointer same as addEventListener when fn is called
        return (fn.call(elem, window.event));
      });
    }
  }

  /*
   * Parse Before
   *
   * Reads `:before` content and splits it at the comma
   * From http://jsbin.com/ramiguzefiji/1/edit?html,css,js,output
   */
  function parseBefore(elem) {
    return window.getComputedStyle(elem, ':before').getPropertyValue('content').slice(1, -1);
  }

  /*
   * Merges two node lists together.
   *
   * From http://stackoverflow.com/questions/914783/javascript-nodelist/17262552#17262552
   */
  var mergeNodes = function(a, b) {
    return [].slice.call(a).concat([].slice.call(b));
  };

  /*
   * Query
   *
   * Reads nodes and finds the widths/points
   *  nodes - optional, an array or NodeList of nodes to query
   *  callback - Either boolean (`true`/`false`) to force a normal callback, or a function to use as a callback once query and nodeWrites have finished.
   */
  EQjs.prototype.query = function (nodes, callback) {
    var proto =...