JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="header">TITLE</div><div class="corner"><div></div></div>
<div class="body">Content</div>
</div>
CSS
.container{
width: 660px;
background: #fff;
color:white;
}
.container .header{
float: left;
width: 110px;
background: #333;
border-radius: 5px 5px 0 0;
}
.container .body{
clear: left;
width: 660px;
background: #333;
border-radius: 0 0 5px 5px;
}
.corner{
display:inline-block;
width:15px;
height:15px;
position:relative;
bottom:-4px;
background:#333;
}
.corner>div{
height:inherit;
width:inherit;
background:white;
border-radius: 0 0 0 5px;
}