JSFiddle - React, Tailwind, and code Playground

HTML

You should be able to click in the red box and type red.
    <br><br>

<div class ="container" contenteditable="true">
    
<span class="meatball w_o_r_d_s" contenteditable="true" id="meatball">meatball</span>
<!-- will work with contenteditable="false" but then I can't type blue-->
</div>

CSS

#meatball{
    border: 1px dashed blue;
    color:blue;
    padding: 0 30px 0 30px;
    font-size:20px;
}

.container{
    border: 1px dashed red;
    color:red;

}