JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="ishadow">
      <img class="img" data-blur="20" src="https://picsum.photos/500/300">
    </div>
    <div class="ishadow">
      <img class="img" data-blur="20" src="https://picsum.photos/500/301">
    </div>
    <div class="ishadow">
      <img class="img" data-blur="5" src="https://picsum.photos/500/302">
    </div>

  </div>

CSS

body {
  margin: 0;
  line-height: 1
}

img {
  max-width: 100%
}

.container {
  display: grid;
  padding: 2em;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 80px;
  justify-items: stretch;
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto
}

h1 {
  text-align: center;
  font-size: 2em;
  font-family: system-ui, sans-serif;
  margin: 1em;
  font-weight: 700;
  color: #282828
}

JavaScript

/*
 * shadow-image.js
 * <[email protected]> (https://tungu.me)
 * Released under the MIT License.
 */

const headCss = '@supports (-ms-ime-align: auto) { .image-shadow { display: none; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .image-shadow { display: none; } }';
const head = document.head || document.getElementsByTagName('head')[0];
const style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet) {
  style.styleSheet.cssText = headCss;
} else {
  style.appendChild(document.createTextNode(headCss));
}

head.appendChild(style);


document.querySelectorAll('.ishadow').forEach(function(el) {
  el.style.position = 'relative';

  const realImage = el.getElementsByTagName('img')[0];
  const imageSource = realImage.getAttribute('src');
  const shadowBox = document.createElement('div');
  const parent = realImage.parentNode;
  const blurValue = realImage.getAttribute('data-blur');

  shadowBox.classList.add('image-shadow');
  parent.insertBefore(shadowBox, realImage.nextSibling);

  const styles = {
    backgroundImage: `url('${imageSource}')`,
    WebkitFilter: `blur(${blurValue}px)`,
    position: 'absolute',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    backgroundSize: '100%',
    bottom: '-10%',
    left: '5%',
    width: '90%',
    height: '95%',
    zIndex: '-1',
  };


  Object.keys(styles).forEach(function(key) {
    shadowBox.style[key] = styles[key];
  });
});