JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="popover fade bottom in" style="display: block; top: 24px; left: 232px;">
    <div class="arrow"></div>
     <h3 class="popover-title">A Title</h3>

    <div class="popover-content">And here's some amazing content. It's very engaging. right?</div>
</div>

CSS

.popover {
    border-top: 5px solid #000000;
    border-left: 5px solid #000000;
    border-right: 5px solid #000000;
    border-bottom: 5px solid #000000;
}
.popover.bottom>.arrow:after {
    top:7px;
    border-bottom-color: #f7f7f7;
}
.popover.bottom>.arrow {
    margin-left:-5px;
    border-bottom-color: #000;
    margin-top:-5px;
}
.popover>.arrow {
    border-width: 16px;
}