JSFiddle - React, Tailwind, and code Playground

HTML

<div class="chatbubble">
    This is a chat bubble
</div>

CSS

body {
    padding: 10px;
}
.chatbubble {
    background: #ddd;
    border: 2px solid #aaa;
    
    display: inline-block;
    padding: 1em;
    
    font-size: 2em;
    height: 40px;

}
.chatbubble::after {
    content: "";
    border: transparent solid 20px;
    border-top-color: #aaa;
    position: absolute;
    z-index: 998;
    margin-top:36px;
}

.chatbubble::before {
    content: "";
    border: transparent solid 20px;
    border-top-color: #ddd;
    position: absolute;
    z-index: 999;
    margin-top:70px;
}