JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block-1">1</div>
<div class="block-2">2</div>
<div class="block-11">11</div>
<div class="block-101">101</div>
<div class="block-301">301</div>

CSS

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 20px;
  text-align: center;
  line-height: 100px;
}
.block-1 {
box-shadow: 10px 20px 30px gray;
height: 100px;
}
.block-2 {
box-shadow: 10px 20px 30px gray;
height: 100px;
}
.block-11 {
box-shadow: 10px 20px 30px gray;
height: 100px;
}
.block-101 {
box-shadow: 10px 20px 30px gray;
height: 100px;
}
.block-301 {
box-shadow: 10px 20px 30px gray;
height: 100px;
}

JavaScript

[].forEach.call(document.querySelectorAll('[class*="block-1"]'), function(node) {
	var bsh = getComputedStyle(node).boxShadow;
	node.style.boxShadow = "inset "+bsh;
});