JSFiddle - React, Tailwind, and code Playground

by Fiddel

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="load()">Click</button>
</div>

CSS

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

JavaScript

function setShadow(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)";
}

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