JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/addon/scroll/simplescrollbars.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/addon/scroll/simplescrollbars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/mode/javascript/javascript.min.js"></script>
<script type="text/javascript">
var myCodeMirror = CodeMirror(document.body, {
value: "function myScript(){return 100;}",
mode: "javascript",
lineSeparator: null,
theme: "default", // theme directory
indentUnit: 2,
smartIndent: true,
tabSize: 2,
indentWithTabs: false,
electricChars: true,
extraKeys: null,
lineWrapping: false,
lineNumbers: true,
firstLineNumber: 1,
scrollbarStyle: "overlay",
inputStyle: "contenteditable",
readOnly: false, // also "nocursor"
showCursorWhenSelecting: false,
lineWiseCopyCut: true,
undoDepth: 200,
historyEventDelay: 1250,
autofocus: true
});
</script>
<div id="content">
ABC
<div id="popup">
DEF
</div>
</div>
CSS
.CodeMirror {
height: calc(100vh - 25px);
width: 100%;
}
#content {
cursor: pointer;
position: relative;
}
#popup {
display: none;
position: absolute;
top: 0;
z-index: 1;
width: 100%;
}
JavaScript
$(document).ready(function(){
$('#content').click(
function(){
popup = $('#popup');
if (popup.hasClass('show')) {
popup.slideUp(250, function() {
popup.fadeOut(250).removeClass('show');
});
} else {
popup.slideDown(250, function() {
popup.fadeIn(250).addClass('show');
});
};
}
);
});