JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<input type="text" class="console_window"/>
</body>
CSS
body {
background-color: #000;
margin: 0;
overflow-y: hidden;
}
input[type=text].console_window {
background-color: #000;
color: #fff;
width: 100%;
height: 16px;
font-family: Monospace;
font-size: 14px;
font-weight: none;
font-style: normal;
border: none;
outline: none;
resize: none;
overflow-y: hidden;
}
JavaScript
var input;
function keyup(e) {
switch (e.which) {
case 13:
document.body.innerHTML +=
"<input type='text' class='console_window'/>"
input = document.getElementsByClassName("console_window")[document.getElementsByClassName("console_window").length - 1];
input.focus();
break;
}
}
document.addEventListener("keyup", keyup, false);