JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content" contenteditable="true">
	    <ul>
	        <li>list item 1</li>
	        <li>list item 2</li>
	        <li>list item 3</li>
	    </ul>
	    <p>Paragraph 1</p>    
	    <p>Paragraph 2</p>
	    <p><span class="special">Paragraph 3</span></p>
	</div>
	
	<button onclick="document.execCommand('insertUnorderedList');">UL</button>
	<button onclick="document.execCommand('insertOrderedList');">OL</button>
	<button onclick="document.execCommand('removeFormat');">removeFormat</button>
	<button onclick="alert( document.getElementById('content').innerHTML );">GetHTML</button>
	<button onclick="document.execCommand('undo');">Undo</button>
<p>Select the paragraphs, then click UL. Note that the list looks "broken". Click Get HTML, note all the extra spans. Undo.</p>
<p>Repeat the test with OL. Same result: the list doesn't look as desired (as set in the stylesheet) and there are spans with inline styling. Undo.</p>
<p>Select "Paragraph 3" and click UL or OL, note that the desired list styling is not applied. Click Get HTML, note that class="special" is missing from the span.</p>

CSS

#content {
	font: 12px/18px Arial,Helvetica,sans-serif;
	color: #333;
	border: 1px solid #ccc;
	padding: 10px;
	height: 200px;
	overflow: auto;
}
#content p {
	font-size: 16px;
	line-height: 22px;
	color: #888;
}
#content ul li {
	font: 12px/17px Consolas,monospace;
}
#content ol li {
	font: 14px/19px "Times New Roman",Times,serif;
}