JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <span class="text">Hello, World! This is just text for test</span>
</p>
<p>
    <span class="text" style="background: green;">This text with custom background</span>
</p>

CSS

.text { 
    display: inline-block; 
    position: relative;  
    background: darkred; 
    padding: 3px 5px; 
    border-radius: 5px; 
    color: #ddd;
}

.text:after {
    content: "";
    display: block;
    position: absolute;
    top: 6px;
    left: -8px;
    width: 0;
    border-width: 8px 0 0 8px;
    border-style: solid;
    border-color: darkred rgba(0, 0, 0, 0);
}