JSFiddle - React, Tailwind, and code Playground

HTML

<p>In Internet Explorer 8, the first letter of the following text will have a red background and the rest of the letters will have a yellow background.</p>

<div id="test">Test</div>

<p>Screenshot:</p>

<img...

CSS

#test {
    /* The following image is a single green pixel */
    background: yellow url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUA/wA0XsCoAAAACklEQVQIHWNgAAAAAgABz8g15QAAAABJRU5ErkJggg==');
    color: white;
    float: left;
}

#test:first-letter {
    /* The following image is a single red pixel */
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEX/AAAZ4gk3AAAACklEQVQIHWNgAAAAAgABz8g15QAAAABJRU5ErkJggg==/wA0XsCoAAAACklEQVQIHWNgAAAAAgABz8g15QAAAABJRU5ErkJggg==');
}

p {
    clear: left;
}