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 right 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.right>.arrow:after {
    left: 8px;
    bottom: -10px;
}
.popover.right>.arrow {
    left: -16px;
    margin-top: -12px;
    border-right-color: #000;
}
.popover>.arrow {
    border-width: 12px;
}