JSFiddle - React, Tailwind, and code Playground

HTML

<p class="test1"><span>P</span>aragraph text sldfksldf slf slkdfj slkfj sldkf sldk fslk flsdkjf sl;dkf sldkf klsd fsdklfj sdlkf sdlkfj sdlkf slkdf skd f</p>
<br />
<br />
<p class="test2">Paragraph text sldfksldf slf slkdfj slkfj sldkf sldk fslk flsdkjf sl;dkf sldkf klsd fsdklfj sdlkf sdlkfj sdlkf slkdf skd f</p>

CSS

p.test1 span,
p.test2:first-letter {
    float: left;
    font-family: arial, serif;  
    font-size: 70px;
    line-height: 70px;
    margin: 10px;
    background:red;   
}