JSFiddle - React, Tailwind, and code Playground

by trkli

HTML

<div class="el">
  <div class="blur"></div>
  <img src="https://caninepartners.org.uk/wp-content/uploads/2015/10/site_imagery_rehome_a_dog_Ayla.jpg" alt="">
</div>

CSS

.el {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

img {
  position: absolute;
  top: 0; left: 0;
  z-index: -100;
}

.blur {
  width: 300px;
  height: 200px;
  box-shadow: inset 0 0 100px 50px white;
}