JSFiddle - React, Tailwind, and code Playground

HTML

<div class="blurred">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1280px-Sunset_2007-1.jpg">
</div>

CSS

img {
      position: relative;
      top:-5%; left:-5%; z-index: -1;
			width:110%; height:110%;
      filter: blur(20px);
    }

    .blurred {
      position: relative;
      width: 100%;
      height: 300px;
      overflow: hidden;
      background: transparent url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1280px-Sunset_2007-1.jpg') no-repeat 50% / auto 100%;
    }