JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrapper">
<br>
<br>
<div class="popover-test"></div>
<div class="content"></div>
</div>
CSS
body {
background-color:#ccc;
}
.wrapper {
z-index:1;
}
.popover-test {
background-color: #fff;
border: 1px solid #929292;
box-shadow: 0 0 10px 1px #929292;
height: 100px;
position: relative;
width: 200px;
}
.popover-test::before {
background-color: #fff;
border-bottom: 1px solid #fff;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
top: -10px;
content:"";
height: 20px;
left: 101px;
width: 50px;
position: absolute;
z-index:1;
}
.popover-test::after {
background-color: #fff;
border: 1px solid #929292;
border-bottom: 1px solid #fff;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
box-shadow: 0 0 10px 1px #929292;
top: -20px;
content:"";
height: 20px;
left: 100px;
width: 50px;
position: absolute;
z-index:-1;
}