JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
    <div class="block2">
        <div class="box">
            
        </div>
    </div>
</div>

CSS

body {
    background-color: #ddd;
}
.block {
    width: 90%;
    height: 300px;
    /* background-image: url(http://subtlepatterns.com/patterns/wavegrid.png); */
    /* background-color: #eee; */
    padding-top: 50px;
}
.block2 {
    background-color: transparent;
    padding: 10px;
    margin: 0 auto;
}
.box {
    position: relative;
	width: 400px;
    height: 200px;
	margin: 0 auto;
	background-color: #fff;
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}
.box:before, .box:after {
	position: absolute;
	width: 40%;
	height: 10px;
	content: ' ';
	left: 12px;
	bottom: 5%;
	background: transparent;
	-webkit-transform: skew(-5deg) rotate(-5deg);
	-moz-transform: skew(-5deg) rotate(-5deg);
	-ms-transform: skew(-5deg) rotate(-5deg);
	-o-transform: skew(-5deg) rotate(-5deg);
	transform: skew(-5deg) rotate(-5deg);
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
	z-index: -1;
}
.box:after {
	left: auto;
	right: 12px;
	-webkit-transform: skew(5deg) rotate(5deg);
	-moz-transform: skew(5deg) rotate(5deg);
	-ms-transform: skew(5deg) rotate(5deg);
	-o-transform: skew(5deg) rotate(5deg);
	transform: skew(5deg) rotate(5deg);
}