JSFiddle - React, Tailwind, and code Playground

by 5p17f1Re

HTML

<div id="first"  class="block"></div>
<div id="second" class="block"></div>

CSS

body {background:#ccc}
#first {left:50px; top:100px;background: #fff;z-index:2;border: 2px solid #54a0ff;}
#second {left:55px; top:104px;background: #306ab3;z-index:1; box-shadow:0 0 20px 0 #808080;border: 2px solid #306ab3; width:190px; height:99px}
.block {position:absolute;  width:200px; height:100px;}
#second:after, #second:before{content:'';position: absolute;border-style:solid;border-color:transparent;}
#second:before{  border-width: 0 5px 4px 0;border-right-color: #306ab3;left: -7px; bottom:-2px;}
#second:after { border-width:  0 0 5px 5px ;border-left-color: #306ab3; right: -7px;top: 96px;}