JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<section id="s1">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

<section id="s2">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 ...

CSS

div{
  background-color: #aaa;
  height: 5px;
}

div:nth-child(2n + 1){
  background-color: #bbb;
}

JavaScript

/**
 * Iterated integer wave count (linear, sine and cosine and inverted waves)
 */

console.clear();

function wave(container, type, min, max){

	if(!min){	min = 0; }
  if(!max){ max = 100; }
	
  container = document.querySelector(container);
  if(!container){ return false; }
  
  Array.prototype.forEach.call(container.querySelectorAll('div'), function(el, i){

    var l = el.parentNode.children.length,
        p = Math.floor(l / 2);

    var wave_value = ((i >= p ? (l - ((i % l) + 1)) : i));
    var l_wave = (wave_value / p);
		var _type = l_wave;

    switch(type){
    	case 'l_wave_i':
      	_type = 1 - (wave_value / p);
        break;
    	case 's_wave':
      	_type = Math.sin((Math.PI / 2) * l_wave);
        break;
    	case 's_wave_i':
      	_type = 1 - Math.sin((Math.PI / 2) * l_wave);
        break;
    	case 'c_wave':
      	_type = 1 - Math.cos((Math.PI / 2) * l_wave);
        break;
    	case 'c_wave_i':
      	_type = Math.cos((Math.PI / 2) * l_wave);
        break;
    	default:
      	_type = l_wave;
        break;
    }

    el.style.width = min + (_type * (max - min)) + '%';

  });
  
}

wave('#s1', 's_wave', 10, 100);
wave('#s2', 'c_wave');