JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <title>Blu - Text Editor</title>
    </head>
    <body>
        <div id = "editor" contenteditable="true"></div>
        <script src = "script.js"></script>
    </body>
</html>

CSS

body {
                margin:0px;
                padding:0px;
                overflow:hidden;
            }
            #editor {
                background:rgb(30,30,30);
                color:white;
                padding:10px;
                line-height:1.5em;
                font-family:"Lucida Console", Monaco, monospace;
                width:400px;
                height:400px;
                display:inline-block;
            }

JavaScript

function UnColor() {
    var elem = document.getElementById("editor");
    var text = elem.textContent;
    elem.innerHTML = text;
}

function Color() {
    UnColor();
    var elem = document.getElementById("editor");
    var code = elem.innerHTML;
    code = code.replace("var","<span style='color:dodgerblue'>var</span>");
    code = code.replace(/"(.*?)"/g,"<span style='color:green'>&quot;$1&quot;</span>");
    code = code.replace(/&lt;(.*?)&gt;/g,"<span style='color:#F90'>&lt;$1&gt;</span>");
    elem.innerHTML = code;
}

setInterval(Color,1000)