JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">

<div id="container">
    <div id="output"></div>
    <div id="dir">
        <div id="dirText"></div>
        <input id="command">
        <div id="caret"></div>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}

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

.folder {
    color: #3465a4;
}

.errMsg {
    color: #ffffff;
}

#container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #300a24;
    color: #ffffff;
    font-family: 'Ubuntu', sans-serif;
}

#command {
    width: 0px;
    background-color: transparent;
    color: inherit;
    font-family: inherit;
    border: none;
    caret-color: transparent;
    font-size: inherit;
}

#command:focus {
    outline: none;
}

#output {
    display: flex;
    flex-direction: column-reverse;
    overflow-y: scroll;
    overflow-x: hidden;
    overflow-wrap: break-word;
}

#dir {
    display: flex;
    align-items: center;
}

.indent {
    margin-left: 15px;
}

.green {
    color: #4d9a06;
}

.blue {
    color: #346492;
}

#caret {
    height: 1rem;
    width: 0.5rem;
    background-color: #ffffff;
    visibility: hidden;
}

JavaScript

/*

Commands:
    help - text
    ls - text
    cd [folder] [..] - Changes working directory. Options: Give no options to go to top level directory. 'cd ..' to navigate to parent directory. 'cd [folder]' to navigate to a child directory.
    mkdir [folder] - Creates folder
    rmdir [folder] - Removes folder
    touch [file] - Creates file
    rm [file] - Removes file
    pwd - Displays current working directory
    clear - Clears display

*/

const command = document.getElementById("command");
const output = document.getElementById("output");
const dir = document.getElementById("dir");
const dirText = document.getElementById("dirText");
const caret = document.getElementById("caret");
const username = "username";
const computername = "ubuntu-machine";

let root = {
	type: "root",
    contents: {
    	Desktop: { 
            type: "folder", 
            contents: {
                Projects: {
                    type: "folder",
                    contents: {
                        myProject: {
                            type: "file",
                            content: {},
                        }
                    },
                }
            }
        },
        Downloads: { 
            type: "folder", 
            contents: {}
        },
        Documents: { 
            type: "folder", 
            contents: {}
        },
        Videos: { 
            type: "folder", 
            contents: {}
        },
        Music: { 
            type: "folder", 
            contents: {}
        },
        Pictures: { 
            type: "folder", 
            contents: {}
        },
    }
};


let currentFolder = root;
let currentDir = ["~"]
dirText.innerHTML = `<span class="green">${username}@${computername}</span>:<span class="blue">${currentDir.join("")}</span>$`


function ls(folder){
	let output = [];
    
    for(let prop in folder.contents){
        output.push([prop, folder.contents[prop].type]);
    }
    
    return output;
}


function...