JSFiddle - React, Tailwind, and code Playground

HTML

<div id="area" contenteditable="true" autocorrect="false" autocapitalize="false" spellcheck="false">
<b class="comment">// this is a test</b>
    
<b class="comment">/*
 * 
 * this is a multi-line comment
 *
 */</b>
    
<b class="token">function</b> test(<b class="var">asdf</b>, <b class="var">fdsa</b>) {
    console.log(<b class="var">fdsa</b>, <b class="var">asdf</b>);
}
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0em;
}

#area {
    height: 100%;
    padding: 0.5em;
    margin: 0px;
    
    font-family: monospace;
    overflow: auto;
    
    white-space: pre-wrap;
    
    box-sizing: border-box;
    
	-moz-appearance: none;
	-webkit-appearance: none;
}

#area:focus {
    outline: 0px none;
}

.comment {
    color: #006E00;
    font-weight: 100;
    font-style: italic;
}

.token {
    color: #FF00FF;
}

.var {
    color: #6666FF;
}

JavaScript

// code editor