JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.firebase.com/v0/firebase.js"></script>

<p>A realtime collaborative spreadsheet using <a href="http://ondras.zarovi.cz/" target="_blank">Ondřej Žára</a>'s <a href="http://jsfiddle.net/ondras/hYfN3/" target="_blank">code</a>.<br>Features:</p>

<ul> 
    <li>Under 45 lines of JavaScript</li>
    <li>Libraries used: <strong>Firebase</strong></li>
    <li>Excel-like syntax (formulas start with "=")</li>
    <li>Support for arbitrary expressions (=A1+B2*C3)</li>
    <li>Circular reference prevention</li>
    <li>Realtime collaborative editing</li>
</ul>

<p>Users with same url can collaborate on the same spreadsheet in realtime!</p>

<table></table>

CSS

li {
    list-style: none;
}
li:before {
    content: "✓ ";
}

input {
    width: 80px;
    font-size: 14px;
    padding: 2px;
}

input:hover {
    background-color: #eee;
}

input:focus {
    background-color: #ccf;
}

input:not(:focus) {
    text-align: right;
}

table {
    border-collapse: collapse;  
}

td {
    border: 1px solid #999;
    padding: 0;
}

tr:first-child td, td:first-child {
    background-color: #ccc;
    padding: 1px 3px;
    font-weight: bold;
    text-align: center;
}

footer {
    font-size: 80%;
}

JavaScript

var appRef = new Firebase("https://spreadsheet.firebaseio-demo.com/"),
    url = (window.location != window.parent.location) ? document.referrer: document.location,                                                                                                                                        
    ref = appRef.child(url.substring(19, url.length-1));

for (var i=0; i<6; i++) {
    var row = document.querySelector("table").insertRow(-1);
    for (var j=0; j<6; j++) {
        var letter = String.fromCharCode("A".charCodeAt(0)+j-1);
        row.insertCell(-1).innerHTML = i&&j ? "<input id='"+ letter+i +"'/>" : i||letter;
    }
}

ref.on('child_added', function(data) { update(data.name(), data.val()); });
ref.on('child_changed', function(data) { update(data.name(), data.val()); });

var DATA={}, INPUTS=[].slice.call(document.querySelectorAll("input"));
INPUTS.forEach(function(elm) {
        elm.onfocus = function(e) {
            e.target.value = localStorage[e.target.id] || "";
        };
        elm.onblur = function(e) {
            ref.child(e.target.id).set(e.target.value);
            computeAll();
        };
        var getter = function() {
            var value = localStorage[elm.id] || "";
            if (value.charAt(0) == "=") {
                with (DATA) return eval(value.substring(1));
            } else { return isNaN(parseFloat(value)) ? value : parseFloat(value); }
        };
        Object.defineProperty(DATA, elm.id, {get:getter});
        Object.defineProperty(DATA, elm.id.toLowerCase(), {get:getter});
    });

function update(name, value) {
    document.getElementById(name).style.backgroundColor = "#aed89c";
    setTimeout(function() { document.getElementById(name).style.backgroundColor = "#fff" }, 600);
    localStorage[name] = value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    computeAll(); 
}

(window.computeAll = function() {
    INPUTS.forEach(function(elm) { if(elm != document.activeElement) try { elm.value...