JSFiddle - React, Tailwind, and code Playground
HTML
<div id="comment">I am a comment!</div>
CSS
#comment{
position: relative;
top: 20px;
left: 20px;
padding: 10px;
width: 150px;
height: 150px;
background-color: #F0F0F0;
border: 1px solid #D0D0D0;
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
#comment:after, #comment:before {
border: solid transparent;
content: ' ';
height: 0;
position: absolute;
width: 0;
}
#comment:after {
border-color: rgba(240, 240, 240, 0);
border-bottom-color: #F0F0F0;
border-width: 9px;
top: -18px;
left: 7px;
}
#comment:before {
border-color: rgba(208, 208, 208, 0);
border-bottom-color: #D0D0D0;
border-width: 10px;
top: -20px;
left: 6px;
}