JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tasteTheRainbow">
    <div id="chatContainer"></div>
    <div id="chatControls">
        <textarea id="chatTextBox" placeholder="Enter your message here..."></textarea>
        <button id="chatSend">Send</button>
    </div>
</div>

CSS

.tasteTheRainbow {
    background-image:url(https://cdn.tutsplus.com/vector/uploads/2013/11/chris-flower-600.png);
    background-repeat:repeat;
    position: absolute;
    background: url(https://cdn.tutsplus.com/vector/uploads/2013/11/chris-flower-600.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    background-size: cover;
    display: block !important;
}
.orNot {
    background-image:url(http://upload.wikimedia.org/wikipedia/commons/1/1d/Five_petal_flower_icon.svg);
    background-repeat:repeat;
    position: absolute;
    background: url(http://upload.wikimedia.org/wikipedia/commons/1/1d/Five_petal_flower_icon.svg) no-repeat center center fixed;
    -webkit-background-size: cover;
    background-size: cover;
}
#chatContainer {
    width: 95%;
    height: 50px;
    background: url(../assets/chatTile.png) repeat;
    border: 1px solid #333;
    margin: 0 auto;
    border-radius: 5px;
    margin-top: 10px;
    overflow-y: scroll !important;
    padding: 5px;
}
#chatTextBox {
    resize: none;
    width: 65%;
    height: 35px !important;
    float: left;
    opacity: .9;
}
#chatControls {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
}
#chatSend {
    resize: none !important;
    width: 50%;
    height: 35px !important;
    display: inline-block;
    max-width: 30%;
    float: right;
    opacity: .9;
    padding: 5px;
}

JavaScript

var canned = ['Ok, how is this?']

$(function () {

    // grab a reference to the chat
    var chat = $("#chatContainer")

    // add a click handler to send messages
    $("#chatSend").click(function () {

        $(this).closest(".tasteTheRainbow").fadeTo('fast', 0, function () {
            $(this).toggleClass("orNot").fadeTo('fast', 1);
        });

        var username = "<span class=chatUsername>CNN_News: </span>",
            newMessage = $("#chatTextBox").val() + '<br>',
            delay = 4000

            // reset the input
            $("#chatTextBox").val("")

            // render the chat
            chat.append(username + newMessage)
            chat.scrollTop(chat.prop("scrollHeight"))

            // set a timeout to send a canned response

            setTimeout(function () {
                chat.append('StarkFan: ' + canned.shift() + '<br>')
                chat.scrollTop(chat.prop("scrollHeight"))
            }, delay)


            // end of click handler
    })
})