JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <span class="text">Hello, World! This is just text for test</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);
}

JavaScript

(function($){
    
    $(".text").on("click", function(){
        var color = Math.floor(Math.random()*16777215).toString(16);
        
        $(this).attr("class", "text color-" + color);
        $(this).css("background-color", "#" + color);
        
        $("<style>.text.color-" + color + ":after { border-color: #" + color + " transparent; }</style>").appendTo('head');
    });
    
})(jQuery);