JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://codemirror.net/doc/docs.css">
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<style type="text/css">
    .CodeMirror {
        float: left;
        width: 100%;
        height: 100%;
    }
</style>
<body>
    <div style="padding: 1px; position: absolute; margin: 0px; top: 0px; bottom: auto; left: 0px; right: 0px; width: auto; height: 24px; background: lightgrey;">
        <button>some action</button>
    </div>
    <div style="padding: 1px; position: absolute; margin: 0px; left: 0px; right: 0px; top: 28px; bottom: 0px; width: auto; height: auto; ">
        <textarea id="content" name="content" style="display: none;"></textarea>
    </div>
</body>

JavaScript

document.getElementById("content").value=Array(101).join("a\n");
var editor = CodeMirror.fromTextArea(document.getElementById('content'), {
    mode: 'application/x-httpd-php',
    lineNumbers: true
});