JSFiddle - React, Tailwind, and code Playground

by vvv vvvv

HTML

<p>Something (<em>between brackets</em>) bla bla&hellip;</p>
<span class="wrong">wrong</span>
<p>Something <em>(</em>between <em>beautiful brackets)</em> bla bla&hellip;</p>
<span class="wrong">wrong</span>
<p>Something <em>(between brackets)</em> bla bla&hellip;</p>
<span class="good">good</span>
<p>Something (between <em>beautiful brackets</em>) bla bla&hellip;</p>
<span class="good">good</span>

CSS

body { padding: 10px; font: 18px "Minion Pro"; }
em { font-style: italic; }

.wrong {
    display: inline-block;
    color: #D10505;
    background-color: #FFD3D3;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: Calibri;
    font-size: 0.65em;
    margin-top: 2px;
}

.good {
    display: inline-block;
    color: #0E970E;
    background-color: #E8FCD2;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: Calibri;
    font-size: 0.65em;
    margin-top: 2px;
}

span + p  {
    position: relative;
    margin-top: 1em;
}