JSFiddle - React, Tailwind, and code Playground

by Craig Haywood

HTML

<span class="highlight highlight--blue">Completely FREE Example</span>

CSS

.highlight {
    position: relative;
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    border-top-left-radius: 40px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 40px;
    padding: 4px 15px;
    margin: 0 -13px;
    z-index: -1
}

.highlight--orange {
    background-color: #f1dfc3
}

.highlight--yellow {
    background-color: #ffee8a
}

.highlight--green {
    background-color: #c3eab9
}

.highlight--black {
    background-color: #1a2121;
}
.highlight--blue {
    background-color: #d3e4fe;
}