JSFiddle - React, Tailwind, and code Playground

by Neil Kalman

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/1.17.0/css/jquery.terminal.min.css">
<script src="https://fonts.googleapis.com/css?family=Ubuntu+Mono"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/1.17.0/js/jquery.terminal.min.js"></script>
<div class="wrapper" data-title="demo CLI">
  <div id="term_demo"></div>
</div>
<div id="test">

</div>
<!-- currently, this returns a value to the following commands: -->
<!-- cd newfolder -->
<!-- write-it -h -->
<!-- git -h -->

SCSS

$br: 7px;
$s: 12px;
body,
html {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #212121;
  overflow: hidden;
}

.terminal {
  --color: #b9b5b8;
  --background: #0f3642;
}

.wrapper {
  --background: #0f3642;
  background-color: #0f3642;
  overflow-y: visible;
  padding-bottom: 10px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 30px 1px rgba(0, 0, 0, 0.2);
  position: relative;
  margin: 10px;
  border-radius: 0 0 $br $br;
  margin-top: 35px;
  &::before {
    border-radius: $br $br 0 0;
    position: absolute;
    content: attr(data-title);
    display: block;
    width: 100%;
    text-overflow: ellipsis;
    padding: 0 80px;
    white-space: nowrap;
    overflow: hidden;
    height: 25px;
    line-height: 25px;
    text-align: center;
    color: #4c3436;
    font-size: 1em;
    background: linear-gradient(0deg, #d8d8d8, #ececec);
    top: -25px;
    left: 0;
    font-family: "PT Sans", sans-serif;
  }
  &::after {
    content: "";
    position: absolute;
    top: -18px;
    left: 10px;
    width: $s;
    height: $s;
    background: #f95c5b;
    border-radius: 100%;
    box-shadow: 0 0 0 1px #da3d42, ($s+10px) 0 0 0 #fabe3b, ($s+10px) 0 0 1px #ecb03e, ($s+10px)*2 0 0 0 #38cd46, ($s+10px)*2 0 0 1px #2eae32;
  }
}

.terminal,
.cmd,
.terminal .terminal-output div div,
.cmd .prompt {
  font-size: 16px;
  line-height: 20px;
  font-family: 'Ubuntu Mono', monospace;
}

JavaScript

$(function() {
    var url = 'https://rawgit.com/sindresorhus/cli-spinners/master/' +
              'spinners.json';
    $.getJSON(url, function(spinners) {
        var animation = false;
        var timer;
        var prompt;
        var spinner;
        var i;
        function start(term, spinner) {
            animation = true;
            i = 0;
            function set() {
                var text = spinner.frames[i++ % spinner.frames.length];
                term.set_prompt(text);
            };
            prompt = term.get_prompt();
            term.find('.cursor').hide();
            set();
            timer = setInterval(set, spinner.interval);
        }
        function stop(term, spinner) {
            setTimeout(function() {
                clearInterval(timer);
                var frame = spinner.frames[i % spinner.frames.length];
                term.set_prompt(prompt).echo(frame);
                animation = false;
                term.find('.cursor').show();
            }, 0);
        }
        $('#term_demo').terminal({
            spinner: function(name) {
                spinner = spinners[name];
                if (!spinner) {
                    this.error('Spinner not found');
                } else {
                    this.echo('press CTRL+D to stop');
                    start(this, spinner);
                }
            },
            help: function() {
                var text = Object.keys(spinners).join('\t');
                this.echo('Available spinners: ' + text, {
                    keepWords: true
                });
            }
        }, {
        height: 400,
            greetings: false,
            onInit: function(term) {
                term.echo('Spinners, type [[b;#fff;]help] to display '+
                          'available spinners or [[b;#fff;]spinner <n'+
                          'ame>] for animation', {
                    keepWords: true
                });
            },
            completion: true,
     ...