JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="wrap">
    
   <div id="background">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
       <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
       <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
       <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
  </div> 
 
</div>
</body>

CSS

html,
body,
#background{
    min-height: 100%;
}
.item {
    /* opacity: 0.5; */
    /* position: relative; */
    /* z-index: 10; */
    border:1px solid black;
    background: #ccc;  
    width:300px;
    height:300px;
    display:inline-block;
    position:relative;
    margin-bottom: 80px;
}

.item:before,
.item:after {
        content:"";
        position:absolute;
        z-index:-2;
        bottom:10px;
        left:10px;
        width:47%;
        height:20%;
        max-width:300px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.6);
       -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.6);
            box-shadow:0 15px 10px rgba(0, 0, 0, 0.6);
    -webkit-transform:rotate(-3deg);
       -moz-transform:rotate(-3deg);
        -ms-transform:rotate(-3deg);
         -o-transform:rotate(-3deg);
            transform:rotate(-3deg);
}
         
.item:after {
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);
       -moz-transform:rotate(3deg);
        -ms-transform:rotate(3deg);
         -o-transform:rotate(3deg);
            transform:rotate(3deg);
}

#background {
    background: linear-gradient(110deg, #F3F3F3 1%, #F3F3F3 765px, #FFFFFF 766px, #FFFFFF 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    /* height: 900px; */
    position: absolute;
    width: 1000px;
    /* z-index: -10; */
}