JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
<h1>Chat</h1>

<div class="content">
    <ul class="chat"></ul>
    <input id="message" placeholder="Type a message"/>
</div>

SCSS

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

* { box-sizing: border-box; }

body {
    font-family: Roboto, sans-serif;
    background: #336782;
    color: #fff;
}

h1 {
    margin: 0;
    font-weight: 300;
    background: rgba(0,0,0,0.5);
    padding: 5px 10px;
    height: 50px;
}

.content {
    padding: 20px;
    max-width: 400px;
    height: calc(100vh - 50px);
    overflow-y: scroll;
}

ul.chat {
    list-style: none;
    padding: 0;
    margin: 0;
    li {
        padding: 5px 10px;
        margin: 5px 0;
        text-shadow: 0 1px 1px rgba(0,0,0,0.5);
        background: rgba(255,255,255,0.2);
        border: 1px solid rgba(255,255,255,0.1);
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        cursor: pointer;
        transition: all 100ms ease;
        &:hover {
            background: rgba(255,255,255,0.1);
        }
    }
    span {
        font-weight: 700;
        &:after {
            content: ": ";
        }
    }
}

input {
    width: 100%;
    background: rgba(255,255,255,0.5);
    border: none;
    border-radius: 3px;
    padding: 8px 12px;
    font-size: 12pt;
    color: #fff;
    outline: none;
    box-shadow: inset 0 0 3px #aaf;
    &:focus {
        box-shadow: 0 0 25px rgba(128, 128, 255, 0.5), inset 0 0 3px rgb(128, 128, 255);
    }
    &::-webkit-input-placeholder {
        color: #ddd;
    }
    color: red;
}

JavaScript

var fire = new Firebase("https://ypr9f28vxat.firebaseio-demo.com/chat");

//List has been appended to
fire.on("child_added", function (snapshot) {
    var chatObj = snapshot.val();
    var author = $("<span/>").text(chatObj.author);
    $(".chat").append(
    $("<li/>")
        .append(author)
        .append(chatObj.message));
});

$("#message").on("keypress", function (e) {
    if (e.which === 13) {
        var msg = $("#message").val();
        $("#message").val("");
        fire.push({
            author: "Author",
            message: msg
        });
    }
});