JSFiddle - React, Tailwind, and code Playground

by Chris

HTML

<div id="output">Welcome to Fallout 4.<br/></div>

CSS

@import url(http://fonts.googleapis.com/css?family=VT323);

body {
    margin: 0
}

#output {
    box-sizing: border-box;
    padding: 1em;
    min-height: 100vh;
    font-size: 18pt;
    font-family: 'VT323';
    color: #0f0;
    background-color: #666;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAECAYAAABCxiV9AAAAFUlEQVQImWNgYGD4jwczNODBZOoEAATdFPMigNeFAAAAAElFTkSuQmCC);
}

button {
    font-size: 18pt;
    font-family: 'VT323';
    color: #0f0;
    background-color: transparent;
    border: 3px solid #0f0;
    padding: 0.3em 0.5em 0.5em;
    margin-right: 2em
}

JavaScript

// https://answers.yahoo.com/question/index?qid=20150611025744AAVOEnw
// cyoa styling

function print(message) {
    document.getElementById("output").innerHTML += "<p>" + message + "</p>";
}

setTimeout(function() {
    print("Wait for another two seconds.");
    setTimeout(function() {
        print("Thanks for waiting! You're standing at a fork in the way.");
        print("<button>Go left</button> <button>Go right</button>");
    }, 2000);
}, 1000);