JSFiddle - React, Tailwind, and code Playground
HTML
<div class="box">
<div class="box-head">123</div>
<div class="box-content">123</div>
</div>
CSS
body {padding: 8px;}
.box {
margin:15px;
background: blue;
position:relative;
z-index:9999;
border:1px solid #666;
border-radius:7px;
}
.box-head {
position:relative;
padding:5px 10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: #ffba00;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, #ffd800), to(#ffba00));
background-image: -webkit-linear-gradient(#ffd800 0, #ffba00 100%, #ffba00);
background-image: -moz-linear-gradient(#ffd800 0, #ffba00 100%, #ffba00);
background-image: -ms-linear-gradient(#ffd800 0, #ffba00 100%, #ffba00);
background-image: -o-linear-gradient(#ffd800 0, #ffba00 100%, #ffba00);
background-image: linear-gradient(#ffd800 0, #ffba00 100%, #ffba00);
}
.box-content {
background:#edecde;
padding:15px 10px 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.box-head:before {
content:'';
position:absolute;
top:100%;left:25px;
width: 0;height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #ffba00;
}
.box:before {
content:'';
position:absolute;
top:-15px;left:-15px;right:-15px;bottom:-15px;
padding:10px;
border: 2px solid #004c3b;
border-radius:7px;
z-index: -1;
background:transparent -webkit-gradient(linear, left top, left bottom, from(rgba(77,159,141,.3)), to(rgba(40,73,66,.5)));
background:transparent...