JSFiddle - React, Tailwind, and code Playground

HTML

<span style="" class="yavbc-color-tip"><span style="">Some text</span></span>

CSS

span.yavbc-color-tip {
    display: inline-block;
    padding: 0;
    background-color: rgb(190, 233, 255);
    border: 1px solid green;
} 
span.yavbc-color-tip span {
    display: inline-block;
    padding: 3px;
    border-radius: 8px;   
    border: none;
    background-color:#005e8e;
    color:#7cd3ff;
    overflow-x: hidden; /* This gives extra space under this span. Why? */
    vertical-align:top;
}