JSFiddle - React, Tailwind, and code Playground

by Carson Evans

HTML

<form id="form" autocomplete="off">
  <div class="terminal">
    <div class="terminal-title">
      <div class="circle circle-red"></div>
      <div class="circle circle-yellow"></div>
      <div class="circle circle-green"></div>
      Terminal Title
    </div>  
    <div class="terminal-body" id="terminal">
      <pre class="terminal-history" id="history">
Welcome to the terminal!</pre>
      <!-- <div class="terminal-input">
         <div class="terminal-input-symbol">$ </div>
         
      </div> -->
      <!-- <label for="stdin">$ </label> -->
      <div class="terminal-stdin-wrapper">
        <input type="text" name="stdin" id="stdin" class="terminal-stdin">
      </div>
    </div>
  </div>
</form>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 1em;
}

.terminal-title {
  position: relative;
  padding: 0.25em;
  background-color: #d8d8d8;
  text-align: center;
  border-radius: 6px 6px 0 0;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

.circle {
  position: absolute;
  top: 6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}

.circle-red {
  left: 10px;
  background-color: #ec514a;
}

.circle-yellow {
  left: 35px;
  background-color: #ecb33e;
}

.circle-green {
  left: 60px;
  background-color: #469e36;
}

.terminal-body {
  padding: 0.25em;
  background-color: #000;
  height: 500px;
  border-radius: 0 0 6px 6px;
  overflow-y: auto;
}

.terminal-history {
  color: #fff;
  margin: 0;
  font-size: 1.25em;
}

.terminal-stdin {
  padding-left: 1.25em;
  background-color: transparent;
  border: 0;
  color: #fff;
  font-size: 1.25em;
  font-family: monospace;
  width: 100%;
  outline: none;
}

.terminal-stdin-wrapper {
  position: relative;
}

.terminal-stdin-wrapper::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '$ ';
  z-index: 100;
  color: #fff;
  font-family: monospace;
  line-height: 1.25em;
  font-size: 1.25em;
}

JavaScript

var form = document.getElementById('form');
var history = document.getElementById('history')
var terminal = document.getElementById('terminal')
var stdin = document.getElementById('stdin');

function addHistory(str) {
	history.innerHTML += '\n' + str;
}

function clearHistory() {
	history.innerHTML = '';
}

function showHelp() {
	addHistory('Showing the help')
}

var commands = {
	help: function() { showHelp() },
  clear: function() { clearHistory() }
}

form.onsubmit = function(e) {
	e.preventDefault();
  addHistory('$ ' + stdin.value);
  
  if (stdin.value === '') {
  	return;
  } else if (commands[stdin.value]) {
  	commands[stdin.value]();
  } else {
  	addHistory(stdin.value + ': command not found')
  }
  
  stdin.value = '';
}

stdin.focus();