JSFiddle - React, Tailwind, and code Playground

by Ruslan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.5/ace.js"></script>
<div id="editor"></div>

CSS

html, body, #editor {
	height: 100%;
	margin: 0
}

#editor {
	width: 100%
}

JavaScript

ace.define("ace/theme/test", ["require","exports","module","ace/lib/dom"], function (require, exports, module) {
	exports.isDark = true;
	exports.cssClass = "ace-test";
	exports.cssText = "\
.ace-test {\
	background: #2C2C38;\
	color: #fff;\
}\
.ace-test .ace_gutter {\
	background: rgba(0, 0, 0, .1);\
	border-right: 1px solid rgba(0, 0, 0, .2);\
	color: rgba(255, 255, 255, .5);\
}\
";

	var dom = require("../lib/dom");
	dom.importCssString(exports.cssText, exports.cssClass);
});

var editor = ace.edit('editor');
editor.setTheme('ace/theme/test');