JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<ul id="aninoob-chat-window">
    <li data-player="Baby Ray">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</li>
    <li data-player="Big Mike" class="you">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</li>
    <li data-player="Baby Ray">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</li>
    <li data-player="Baby Ray">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</li>
</ul>
<div id="aninoob-chatter-box">
    <input type="text" value="" />
</div>

CSS

body {
    background-image:url(http://wallpaper-download.net/wallpapers/random-wallpapers-google-background-wallpaper-wallpaper-32464.jpg); 
    height:100%;
}

#aninoob-chat-window {
    cursor:default;
    position:fixed;
    bottom:120px;
    right:20px;
    height:auto;
    width:300px;
    max-height:80%;
    overflow:hidden;
    -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#aninoob-chat-window li:before{
   content:attr(data-player);
    display:block;
    color:#3DB8FF;  
   font-family:tahoma,arial;
    font-weight:bold;
   font-size:24px;
    text-shadow: 2px 2px 2px #000000;
}
#aninoob-chat-window li.you:before{
   color:#FF5757;  
}
#aninoob-chat-window li{
   color:#ffffff;  
   font-family:tahoma,arial;
   font-size:18px;
    list-style:none;
}
#aninoob-chatter-box {
    position:fixed;
    bottom:20px;
    right:20px;
    height:auto;
    width:300px;
    max-height:100px;
    overflow:hidden;
    margin:0px;
}
#aninoob-chatter-box input{
    background-color:transparent;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0.77) 0%, rgba(255,255,255,0.13) 80%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.77)), color-stop(80%,rgba(255,255,255,0.13))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.77) 0%,rgba(255,255,255,0.13) 80%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,0.77) 0%,rgba(255,255,255,0.13) 80%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,0.77) 0%,rgba(255,255,255,0.13) 80%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,0.77) 0%,rgba(255,255,255,0.13) 80%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4ffffff', endColorstr='#21ffffff',GradientType=0 ); /* IE6-9 */
   ...

JavaScript

var chatterbox = '';

$('#aninoob-chatter-box input').keypress(function(event){
    
    if(event.keyCode == 13){
        
        chatterbox = $(this).val();
        $(this).val('');
        $(this).focus();
        
    }
    
});