JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="box">
    <div class="background"></div>
    <div class="shadow"></div>
        <div class="content">
            Conent
        </div>
</div>
</body>

CSS

body{
 background: #222;
}
box{
height: 135px;
width: 450px;
}

.content{
position:absolute;
margin-left: 120px;
margin-top: -120px;
}

.background{
   margin-left:50px;
   position:relative;
   height:135px;
   width:400px;
   background:#fff;
}
.background:after{
   position:absolute;
   bottom:0px; left:-20px;
   content:".";
   text-indent:-999px; overflow:hidden;
   display:block;
   width:0px; height:0px;
   border-top: 20px solid #000;
   border-left: 20px solid transparent;
}
.background:before{
   position:absolute;
   top:0; left:-20px;
   content:"#";
   text-indent:-999px; overflow:hidden;
   display:block;
   background:#fff;
   width:20px; height:115px;
}

.shadow
{
margin-left:30px;
width:420px;
height: 135px;
margin-top: -135px;
position:absolute;
background: -moz-linear-gradient(top,  rgba(181,181,181,0) 0%, rgba(163,163,163,0) 51%, rgba(145,145,145,0.36) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(181,181,181,0)), color-stop(51%,rgba(163,163,163,0)), color-stop(100%,rgba(145,145,145,0.36))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(181,181,181,0) 0%,rgba(163,163,163,0) 51%,rgba(145,145,145,0.36) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(181,181,181,0) 0%,rgba(163,163,163,0) 51%,rgba(145,145,145,0.36) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(181,181,181,0) 0%,rgba(163,163,163,0) 51%,rgba(145,145,145,0.36) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(181,181,181,0) 0%,rgba(163,163,163,0) 51%,rgba(145,145,145,0.36) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b5b5b5', endColorstr='#5c919191',GradientType=0 ); /* IE6-9 */
}