JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <button onclick="setAllShadows(false)">Simple</button>
  <button onclick="setAllShadows(true)">Complex</button>
</div>

CSS

.box
{
  width: 100px;
  height: 100px;
  background: white;
  margin: 20px;
  float: left;
}

JavaScript

function setShadow1(panel, dp)
{
  	if (dp <= 0)
  	{
  		panel.style.boxShadow = "none";
    	return;
  	}
	var panelTop = panel.offsetTop;
  	var shadowTop = panelTop + dp;
  
  	panel.style.boxShadow = "0px " + dp + "px " + dp + "px " + "rgba(0, 0, 0, .38)";
}

function setShadow2(element, dp)
{
    if (dp == 0)
    {
        element.style.boxShadow = "none";
    }
    else
    {
        var shadow = "0px ";

        var ambientY = dp;
        var ambientBlur = dp == 1 ? 3 : dp * 2;
        var ambientAlpha = (dp + 10 + (dp / 9.38)) / 100;

        shadow += ambientY + "px " + ambientBlur + "px rgba(0, 0, 0, " + ambientAlpha + "), 0px ";

        var directY = (dp < 10 ? (dp % 2 == 0 ? dp - ((dp / 2) - 1) : (dp - ((dp - 1) / 2))) : dp - 4);
        var directBlur = dp == 1 ? 3 : dp * 2;
        var directAlpha = (24 - Math.round(dp / 10)) / 100;

        shadow += directY + "px " + directBlur + "px rgba(0, 0, 0, " + directAlpha + ")";

        element.style.boxShadow  = shadow;
    }
}

setAllShadows = function(useComplex)
{
	console.log("Running");
	var boxes = document.getElementsByClassName("box");
  	var dp = 0;
  	for (var i = 0; i < boxes.length; i++)
  	{
    	if (useComplex)
  			setShadow2(boxes[i], dp);
        else
        	setShadow1(boxes[i], dp);
    	dp += 2;
  	}
}