JSFiddle - React, Tailwind, and code Playground

HTML

<span class="bubble">Speech bubble right</span>

CSS

.bubble {
    background-color: #fff;
    border-radius: 7px;
    border: 2px solid #DD4814;
    box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),
                4px 4px 0 hsla(0,0%,0%,.1);
    color: #333;
    display: inline-block;
    font-family: Ubuntu, sans-serif;
    font: 16px/25px;
    padding: 15px 25px;
    position: absolute;
    right: 20px;
}

.bubble:after, .bubble:before {
    border-bottom: 25px solid transparent;
    border-right: 25px solid #fff;
    bottom: -25px;
    content: '';
    position: absolute;
    right: 25px;
}
.bubble:before {
    border-right: 25px solid hsla(0,0%,0%,.1);
    bottom: -28px;
    right: 22px;
}