JSFiddle - React, Tailwind, and code Playground

by Ico Dimchev

HTML

<div id="container" class="container">
    <div class="row app">
        <div class="col col-6">
            <div id="editor" class="editor">

                <div id="editor-marker" class="editor__marker"></div>
                <textarea class="editor__area" name="editor-area" id="editor-area" cols="30" rows="10"></textarea>

                <ul class="editor__controls">
                    <li id="reset">reset</li>
                    <li id="play">play</li>
                </ul>

            </div>
        </div>
        <div class="col col-6">
            <div id="board" class="board">
                
            </div>
        </div>
    </div>
</div>

CSS

.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px; }

.row {
  box-sizing: border-box;
  margin-left: -20px;
  margin-right: -20px; }
  .row:after {
    content: "";
    display: table;
    clear: both; }

.col {
  position: relative;
  float: left;
  min-height: 1px;
  padding-left: 20px;
  padding-right: 20px; }

.col-span {
  position: relative;
  float: left;
  min-height: 1px; }

.col--end {
  float: right; }

.col-1 {
  width: 8.3333333333%; }

.col-2 {
  width: 16.6666666667%; }

.col-3 {
  width: 25%; }

.col-4 {
  width: 33.3333333333%; }

.col-5 {
  width: 41.6666666667%; }

.col-6 {
  width: 50%; }

.col-7 {
  width: 58.3333333333%; }

.col-8 {
  width: 66.6666666667%; }

.col-9 {
  width: 75%; }

.col-10 {
  width: 83.3333333333%; }

.col-11 {
  width: 91.6666666667%; }

.app {
  margin-top: 50px; }

body, html {
  margin: 0;
  padding: 0; }

html {
  box-sizing: border-box; }
  html * {
    box-sizing: inherit; }

.editor {
  position: relative;
  font-family: monospace;
  font-size: 18px; }

.editor__area {
  display: block;
  width: 100%;
  min-height: 400px;
  font-family: inherit;
  font-size: inherit;
  line-height: 1;
  padding: 10px 15px;
  border: 1px solid darkgrey;
  background-color: #ffffe6;
  resize: vertical;
  overflow: auto;
  transition: background-color .3s, border .3s; }
  .editor__area:focus {
    outline: none;
    background-color: #ffffcc;
    border: 1px solid black; }

.editor__controls {
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
  margin-bottom: 10px; }
  .editor__controls li {
    display: inline-block;
    padding: 5px 10px;
    cursor: pointer;
    margin-right: 20px;
    background-color: darkgrey; }
    .editor__controls li:last-of-type {
      margin-right: 0; }

.editor__marker {
  width: 1em;
  height: 1em;
  background-color: black;
  position: absolute;
  backface-visibility: hidden;
  top: -8px;
  left: -.5em;
  visibility:...

JavaScript

;
(function(window) {


    //--------------------------------------------------------------
    //  Panayotov /
    //  https://gist.github.com/panayotov/4c13f66953f06907317a
    //--------------------------------------------------------------

    'use strict';

    var xBuild = (function() {

        var xGlobals = {
            newElementRegex: /<(\w+)\s?\/>/,
        };

        var x = function(_expression, _context) {
            return new x.fn.init(_expression, _context);
        };

        //--------------------------------------------------------------
        //  Extending X with util functions
        //--------------------------------------------------------------
        x.addHelper = function(_name, _fn) {
            x[_name] = _fn;
        };

        //--------------------------------------------------------------
        //  Simple get request helper, just an example how to add helpers
        //--------------------------------------------------------------
        x.addHelper('get', function(_url, _onDone, _onFail) {
            var request = new XMLHttpRequest();
            request.open('GET', _url, true);

            request.onload = function() {
                if (request.status >= 200 && request.status < 400) {
                    _onDone(request.responseText);
                } else {
                    _onFail(request.responseText)
                }
            };

            request.onerror = _onFail;

            request.send();
        });

        //--------------------------------------------------------------
        //  Really, Really, Really simple module system
        //--------------------------------------------------------------
        x.addHelper('module', function(_moduleName, _module) {
            if (!x.modules) {
                x.modules = {};
            }

            if (_moduleName && _module) {
                x.modules[_moduleName] = _module;
            } else {
                return...