JSFiddle - React, Tailwind, and code Playground

HTML

<!-- language: lang-html -->

     <div class="container">
       <div class="inner">
         <div class="image">

         </div>
         <div class="image">

         </div>
         <div class="image">

         </div>
         <div class="image">

         </div>
       </div>
     </div>

CSS

html,
    body{
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .container {
      width: 300px;
      height: 250px;
    }

    .inner {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .image {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi) no-repeat center center fixed;
      background-size: fill;
    }

    .image:before {
      left: -5%;
      right: -5%;
      bottom: -5%;
      content: "";
      position: absolute;
      height: 110%;
      width: 110%;
      background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi)  no-repeat center center fixed;
      background-size: fill;
      -webkit-filter: blur(8px);
      filter: blur(8px);
      overflow: hidden;
    }