JSFiddle - React, Tailwind, and code Playground

HTML

<div id="roomlist"></div>
<form id="postform">
    <div id="roomctrl">
        <input type='text' id='room' name='Room' value="root">Room (to make a new room, add a new room name with your post)</div>
    <div>
        <input type='text' id='name' placeholder='Name'>Name</div>
    <div>message: <span id="status"></span> 
        <div>
            <textarea id='message' placeholder='Message'></textarea>
            <input type="button" id="postbutton" value="post">
        </div>
    </div>
    <input type="hidden" id='parentOf' value="0">
</form>
<hr>
<UL id="messages"></UL>
<script src='https://cdn.firebase.com/v0/firebase.js'></script>

CSS

body {
    font-family:Verdana;
    font-size:10pt;
}
hr {
    border: 0;
    height: 1px;
    background: #333;
    background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
    background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
    background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
    background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}
#postform {
    position:relative;
    display:block;
    margin-top:1em;
    margin-bottom:2em;
}
textarea {
    width:35%;
    height:80px;
}

JavaScript

// string utilities
var StringUtils = {

    isEmpty: function (string) {
        return (!string || (0 === string.length) || /^\s*$/.test(string));
    },

    // remove non-alphanumeric characters
    forceAlnum: function (string) {
        return string.replace(/\W/g, '');
    },

    // html escaping
    escape: function (string) {
        var entityMap = {
            "&": "&amp;",
            "<": "&lt;",
            ">": "&gt;",
            '"': '&quot;',
            "'": '&#39;',
            "`": '&#39;',
            "\\": '&#92;',
            "/": '&#47;',
            "[": '&#91;',
            "]": '&#93;',
            "(": '&#40;',
            ")": '&#41;'
        };
        return String(string).replace(/[&<>\[\]\(\)\\`"'\/]/g, function (s) {
            return entityMap[s];
        });
    },

    // format a string
    formatHTML: function (fmt, args) {
        var h = fmt.replace(/%([a-zA-Z]+)%/g, function (m, match) {
            if (match in args) return StringUtils.escape(unescape(encodeURIComponent(args[match])));
        });
        return h;
    },

    // format a timestamp into a date
    formatDate: function (date, fmt) {
        function pad(value) {
            return (value.toString().length < 2) ? '0' + value : value;
        }
        return fmt.replace(/%([a-zA-Z])/g, function (_, fmtCode) {
            switch (fmtCode) {
                case 'Y':
                    return date.getUTCFullYear();
                case 'M':
                    return pad(date.getUTCMonth() + 1);
                case 'd':
                    return pad(date.getUTCDate());
                case 'H':
                    return pad(date.getUTCHours());
                case 'm':
                    return pad(date.getUTCMinutes());
                case 's':
                    return pad(date.getUTCSeconds());
                default:
                    throw new Error('Unsupported format code: ' + fmtCode);
            }
        });
    }
};

var ref = new...