JSFiddle - React, Tailwind, and code Playground

by basarat

HTML

<style>
    html, body {
        width: 100%;
        height: 100%;
        font-family:'Lucida Console';
        background: #575757;
        color: white;
        margin: 0px;
        overflow-y: hidden;
    }
    #console {
        width: 95%;
        height:90%;
        padding: 10px;
        overflow-y: auto;
    }
    #console div {
        margin-top: 5px;
    }
</style>
<div id="console"></div>
<script>
    var panel = document.querySelector("#console");
    var print = function(m) {
        var newline = document.createElement("div");
        newline.innerHTML = "&gt; " + JSON.stringify(m);
        this.panel.appendChild(newline);
    };
</script>

JavaScript

function Animal(name) { 
    this.name = name;
}
Animal.prototype.walk = function () { print(this.name + ' is walking') };

function Bird(name) { 
}
Bird.prototype.__proto__ = Animal.prototype;
Bird.prototype.fly = function () { print(this.name + ' is flying') };

var animal = new Animal('elephant');
animal.walk();

var bird = new Bird('crow');
bird.walk();
bird.fly();