JSFiddle - React, Tailwind, and code Playground

HTML

<h2>
    <span class="uniform-bg">
        <span>Hello everyone</span>        
    </span>
</h2>

CSS

body {
    background: url('http://css-live.ru/wp-content/themes/css-live/images/headBg_top.gif');
    padding: 20px;
}

h2 {
    line-height: 1.15;
    font-size: 2.2em;
    color: white;
    text-transform: uppercase;
    font-family: sans-serif;
    width: 6em;
    position: relative;
    margin-left: 40px;
}
h2:after {
    content: '';
    position: absolute;
    left: -0.28em;
    top: -0.29em;
    bottom: -0.29em;
    margin-left: -40px;
    border-left: 40px solid rgb(18,106,239);
    border-left: 40px solid rgba(18,106,239, 0.4);
}
.uniform-bg {
    background: rgb(18,106,239); /*для старых браузеров, которые не понимают rgba отображаем без прозрачности*/
    background: rgba(18,106,239, 0.4);
    position: relative;
    outline: rgb(18,106,239) solid 0.3em;/*для старых браузеров, которые не понимают rgba отображаем без прозрачности*/
    outline: rgba(18,106,239, 0.4) solid 0.3em;
    -moz-outline-offset: -0.04em;
}
.uniform-bg span {
    position: relative;
}