JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,900|Pacifico" rel="stylesheet" type="text/css">
<div class="harken_scope">
    <div class="box"></div>
    <div class="harken_chatColumn">
        <div class="harken_chatColumnTitle">Chat</div>
        <div class="harken_chatArea">
            <div class="harken_chatLine">
                <div class="harken_chatLineHeader"> <span class="harken_chatLinePerson">Agent</span>
 <span class="harken_chatLineTime">6:48pm</span>

                </div>
                <div class="harken_chatLineText">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
            </div>
            <div class="harken_chatLine">
                <div class="harken_chatLineHeader"> <span class="harken_chatLinePerson">Agent</span>
 <span class="harken_chatLineTime">6:48pm</span>

                </div>
                <div class="harken_chatLineText">Lorem ipsum dolor sit.</div>
            </div>
            <div class="harken_chatLine">
                <div class="harken_chatLineHeader"> <span class="harken_chatLinePerson">You</span>
 <span class="harken_chatLineTime">6:49pm</span>

                </div>
                <div class="harken_chatLineText">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem fugit laudantium natus pariatur sint atque ipsum quisquam harum. Repudiandae iusto.</div>
            </div>
        </div>
        <form class="harken_chatInputBox harken_chatForm">
            <input type="text" placeholder="Write here and press enter..." class="harken_chatInput" />
            <button class="harken_sendChatMsgBtn">Send</button>
        </form>
    </div>
</div>

CSS

* {
    box-sizing: content-box;
}
body {
    background-color: #ccc;
}
.harken_scope {
    font-family: lato, helveticaneue, arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased!important;
    margin: 0 auto;
}

.harken_scope .harken_chatColumn {
    background: #FFF !important;
    width: 403px !important;
    border-radius: 0 0 5px 5px !important;
    color: #374049!important float:left;
    margin: 0 auto;
}
.harken_scope .harken_chatColumnTitle {
    padding: .56em 23px .7em !important;
    font-size: 2.25em!important;
    font-weight: 800!important;
    letter-spacing: -1px!important;
    position: relative !important;
}
.harken_scope .harken_chatColumnTitle:after {
    content:""!important;
    bottom: 0!important;
    left: 22px !Important;
    margin: 0 auto!important;
    border-bottom: 1px solid rgba(54, 63, 72, 0.23) !important;
    position: absolute!important;
    width: 15%!important;
}
.harken_scope .harken_chatArea {
    padding: 19px 23px 14px !important;
    height: 208px !important;
    overflow-y: auto !important;
}
.harken_scope .harken_chatLine {
    padding: 7px 0 8px !important;
}
.harken_scope .harken_chatLinePerson {
    font-weight: 800 !important;
}
.harken_scope .harken_chatLineTime {
    float: right !important;
    opacity: .25 !important;
    font-size: .95em !important;
}
.harken_scope .harken_chatLineText {
    opacity: .5 !important;
}
.harken_scope .harken_chatInputBox {
    position: relative;
}
.harken_scope .harken_chatInput {
    font: inherit !important;
    border: 0 !important;
    width: -webkit-calc(100% - 128px) !important;
    padding: 19px 105px 21px 23px !important;
    outline: none !important;
    background: #fff !important;
    border-radius: 0 0 3px 3px !important;
    margin: 0 !important;
    font-weight: 500 !important;
    color: inherit !Important;
    border-top: 1px solid rgba(0, 0, 0, 0.22) !important;
    -webkit-transition: .2s !important;
   ...

JavaScript

(function () {

    var $chatArea = $('.harken_chatArea');
    $chatLineTmpl = $('<div class="harken_chatLine">' +
        '<div class="harken_chatLineHeader">' +
        '<span class="harken_chatLinePerson"></span>' +
        '<span class="harken_chatLineTime"></span>' +
        '</div>' +
        '<div class="harken_chatLineText"></div>' +
        '</div>'),

    $presenceInfoChatWarningTmpl = $('<div class="harken_presenceInformationChatLine"><span>User left chat</span></div>');

    function formatDate(date) {
        console.log(date);
        var hour = date.getHours(),
            minute = date.getMinutes(),
            second = date.getSeconds();

        if ( hour < 10 ) hour = '0' + hour;
        if ( minute < 10 ) minute = '0' + minute;
        if ( second < 10 ) second = '0' + second;

        return hour + ':' + minute + ':' + second;
    }

    function appendChatMsg(user, date, msg) {
        $line = $chatLineTmpl.clone();
        $user = $line.find('.harken_chatLinePerson'),
        $time = $line.find('.harken_chatLineTime'),
        $msg = $line.find('.harken_chatLineText');

        $user.html(user);
        $time.html(formatDate(date));
        $msg.html(msg);

        $chatArea.append($line);
        $chatArea.stop().animate({
            scrollTop: $chatArea[0].scrollHeight
        }, 500);
    }


    var $input = $('.harken_chatInput');

    $('.harken_chatForm').on('submit', function (e) {
        var date = new Date(),
            msg = trimmed = $input.val();
        
        trimmed.trim();

        if (trimmed !== '') {
            $input.val('');
            appendChatMsg('You', date, msg);
        }
        
        e.preventDefault();
    });
})();