JSFiddle - React, Tailwind, and code Playground

HTML

<div class="popover">
    <h2>Popover number one</h2>
    <p>Well, the way they make shows is, they make one show. That show's called a piloe going to make more shoy they make shows is, they make one show. That show's called a piloe going to make more shows. </p>
    <div class="arrows"><div class="arrow-top"></div><div class="arrow-btm"></div></div>
</div>

CSS

body {
    background:#c2c2c2;
    font-family: sans-serif;
}

h2 {font-weight:bold;}

.popover {
 background:#fff;
color:#222;    
    width: 75%;
    border-radius:3px;
    position:relative;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
    border: 2px solid black;
}

.arrows {
    border: 1px solid red;
    height: 42px;
    position: relative
}

.arrow-top, .arrow-btm {
    content:"";
    background: #fff;
    position: absolute;
    top: 6px;
    left: 6px;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    /* reduce the damage in FF3.0 */
    display:block; 
    width: 30px;
    height: 30px;
    border: 2px solid black;
}

.arrow-top {
    box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
    z-index:-10;
}

.arrow-btm {
    z-index:10;
}