JSFiddle - React, Tailwind, and code Playground

by kadymov

HTML

<script src="https://rawgit.com/marijnh/CodeMirror/master/lib/codemirror.js"></script>
<link rel="stylesheet" href="https://rawgit.com/marijnh/CodeMirror/master/lib/codemirror.css">
<link rel="stylesheet" href="http://codemirror.net/theme/base16-dark.css">
<link rel="stylesheet" href="http://codemirror.net/theme/monokai.css">
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<ul class="menu">
    <li><span class="title">Test.js</span><span class="close-btn">×</span></li>
    <li><span class="title">index.html</span><span class="close-btn">×</span></li>
    <li class="active"><span class="title">readme.txt</span><span class="close-btn">×</span></li>
</ul>

<textarea id="editor">
function refreshSortableAnswer() {
  for ( var i = 0, end = stepsBuilder.steps.length, elem; i < end; i++) {
    elem = stepsBuilder.steps[i].elements[0];
    if (elem && elem.elementContainer) {
      elem = elem.elementContainer[0];
      if (elem && elem.parentElement !== undefined &&
        elem.parentElement.tagName !== undefined &&
        $(elem.parentElement).hasClass('elementAnswers')) {
        $(elem.parentElement).sortableCustom('refresh');
      }
    }
  }
}
</textarea>

CSS

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v9/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}


body {
    background: #222;
    font: 12px/12px 'Open Sans';
    margin: 0;
    padding: 0;
}

.menu {
    margin: 10px 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid #444;
}

.menu li {
    display: inline-block;
    position: relative;
    height: 26px;
    line-height: 26px;
    margin-left: 30px;
    z-index: 1;
    color: #888;
    font-size: 12px;
    cursor: default;
    box-shadow: inset 0 1px 0 #666, 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.menu li,
.menu li:before,
.menu li:after{
    background-image: -webkit-linear-gradient(top, #343434, #111);
}

.menu li.active{
    z-index: 50;
    color: #fff;
}

.menu li.active,
.menu li.active:before,
.menu li.active:after{
    background-image: -webkit-linear-gradient(top, #454545, #222);
}

.menu li:before,
.menu li:after{
    content : '';
    height: 27px;
    position: absolute;
    width: 25px;
    height: 26px;
    z-index: 0;
    border-radius: 0 5px 0 0; 
}

.menu li:before {
    -webkit-transform: skewX(-30deg);
    left: -16px;
    box-shadow: inset 0 1px 0 #666, -4px 0px 4px rgba(0, 0, 0, 0.2);
    border-radius: 5px 0 0 0; 
}

.menu li:after {
    -webkit-transform: skewX(30deg);
    right: -15px;
    box-shadow: inset 0 1px 0 #666, 4px 0px 4px rgba(0, 0, 0, 0.2);
}

.menu .title {
    position: relative;
    z-index: 1;
}

.menu .close-btn {
    position: relative;
    z-index: 1;
    margin-left: 6px;
    color: #aaa;
    width: 13px;
    height: 13px;
    display: inline-block;
    line-height: 13px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
}

.menu .close-btn:hover {
    color: #000;
    background: #eee;
}

.cm-s-monokai.CodeMirror {
    background: #222;
    font-size: 14px;
}

JavaScript

$('.menu li').click(function() {
    var $li = $(this);
    $li.parent().find('li').removeClass('active');
    $li.addClass('active');
});

$('.editor').keydown(function(e) {
    var $this = $(this);
    if (e.keyCode === 8 && $this.text().length < 3 && $this.find('li').length < 2) {
        e.preventDefault();
    }
});

CodeMirror.fromTextArea(document.getElementById('editor'), {
    mode:  "javascript",
    theme : 'monokai',
    lineNumbers: true,
    styleActiveLine: true,
    matchBrackets: true
});