JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
    <head>
        <title>HTML5 Semantics: The contenteditable Attribute</title>
        <meta charset="utf-8">
        <style>
            [contenteditable=true] {
             outline: 1px dotted #cccccc;
            }
            [contenteditable=true]:hover {
             outline: 1px dotted #ff0000;
            }        
        </style>
    </head>
    <body>
        <p contenteditable="true">This content is editable!</p>
        <ul contenteditable="true">
            <li>By default, this content is editable via its 
            inherited parent elements value.</li>
            <li contenteditable="false" ><span contenteditable="false">This content is <b>not</b> 
            editable via its explicit contenteditable value.</span></li>
        </ul>
        
        <div contenteditable="true">
  Luke, I am your father.
  <span contenteditable="true">Double click here in IE to make this editable</span>
  Don't speak back to me!
</div>
    </body>
</html>

CSS

span
{
    background-color: #c0c0c0;
}

JavaScript

$(document).ready(
    function() {
        //alert(1);
        //console.log('test');
        $('li').click(function(e){
            $(this).append(1);
        })
    }
);