JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<div class="container">
  <div class="header">
    <div class="dot button-red"></div>
    <div class="dot button-yellow"></div>
    <div class="dot button-green"></div>
  </div>
  <div class="panel"></div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700');

body {
    font-family:'Inconsolata', monospace;
    background: #9b59b6;
    //background:url('http://cdn.osxdaily.com/wp-content/uploads/2017/12/classic-mac-os-tile-wallpapers-1.png');
    background:url('https://neoncreativestudios.co.uk/wallpaper-jurassic2.png');
    background-size:cover;
    background-repeat:no-repeat;
}
   
.container {
    max-width: 800px;
    margin: 0 auto;
    height: 400px;
}

.header {
    background: linear-gradient(#f1f1f1 , #d3d3d3);
    width: 100%;
    height: 30px;
    border-radius: 10px 10px 0 0;
    position: relative;
    border-bottom: 2px solid;
    border-color: #9a9a9a;
}

.dot {
    position: absolute;
    top: 40%;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    display: inline-block;
}

.button-red {
    margin-left: 10px;
    background: #fc625d;
}

.button-yellow {
    margin-left: 30px;
    background: #fdbc40;
}

.button-green {
    margin-left: 50px;
    background: #33c748;
}

.panel {
    height: 70vh;
    background: #27292c;
    background:rgba(20,20,20,0.95);
    padding: 20px;
    overflow-y: scroll;
}


.caret {
    border-right: 0.6em solid white;
    margin-right: -0.6em;
    animation: blink-animation 1s steps(2, start) infinite;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

.neon-terminal-input-wrap {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items:flex-end;
    overflow: hidden;
    .symbol {
      flex-grow:0;
    }
}

.symbol {
   color: #c86762;
   font-size: 16px;
   font-weight: 700;
   margin-right: 5px;
   letter-spacing: 2px;
   display:inline-block;
}

.text {
  height:20px;
  display:inline-block;
  vertical-align: text-top;
}

.neon-terminal-input {
    font-family: inherit;
    min-width: 10%;
    height: 20px;
    background: transparent;
    border: none;
    outline: none;
    flex-grow: 1;
    word-wrap: nowrap;
    overflow: hidden;
   ...

JavaScript

kjkj//https://github.com/Kirkhammetz/string-to-argv.js   ISC license

function _classCallCheck(r,e){if(!(r instanceof e))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function r(r,e){for(var t=0;t<e.length;t++){var a=e[t];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(r,a.key,a)}}return function(e,t,a){return t&&r(e.prototype,t),a&&r(e,a),e}}(),Parser=function(){function r(e){if(_classCallCheck(this,r),!e||!e.length)throw new Error("Parser: command provided is empty.");if("string"!=typeof e)throw new Error("Parser: command must be a string!");this.raw=e;var t=this.stringToArray(e.replace(/\s{2,}/g,"").replace(/\t|\n/g," "));if(this.command=t[0],this._=[],t.length){var a=this.parse(t.slice(1));if(!Object.assign){for(var s in a)a.hasOwnProperty(s)&&(this[s]=a[s]);return!0}return Object.assign(this,a)}}return _createClass(r,[{key:"stringToArray",value:function(r){return r.match(/[^\s"']+|"([^"]*)"|'([^']*)'/g)}},{key:"parse",value:function(r){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!r.length)return e;if(r[0].match(/^\-[^\-].*/)){var t=r[0].replace("-","");return r[1]&&r[1].match(/^\-.*/)?(e[t]=!0,this.parse(r.splice(1),e)):r[1]?(e[t]=r[1],this.parse(r.splice(2),e)):(e[t]=!0,this.parse(r.splice(1),e))}if(r[0].match(/^\-{2}.*\=$/)){var a=r[0].match(/--(.*)=/)[1];return e[a]=r[1].replace(/"/g,""),this.parse(r.splice(2),e)}if(r[0].match(/^\-{2}.*\={1}.*$/)){var s=r[0].match(/\-{2}(.*)=/)[1];return e[s]=r[0].match(/\={1}(.*)/)[1],this.parse(r.splice(1),e)}if(r[0].match(/^\-{2}.*$/)){var i=r[0].replace("--","");if(!r[1]||r[1]&&r[1].match(/^\-{1,}/))return e[i]=!0,this.parse(r.slice(1),e);if(r[1]&&!r[1].match(/^\-{1,}/))return e[i]=r[1],this.parse(r.slice(2),e)}return this._.push(r.shift()),this.parse(r,e)}}]),r}();


function getCaretPosition(element) {
    let caretPosition = 0;
    const doc = element.ownerDocument || element.document;
    const win =...