JSFiddle - React, Tailwind, and code Playground

HTML

<body onload='openChat()'>
<div id="chat">
<div id="chatbutton" onclick="openChat()">Chat</div>
<input autocomplete="off" id="chatinput" placeholder="Type a message..." onkeydown="checkKey()"/>
</div>
</body>

<script>
function openChat(){
    document.getElementById("chatinput").style.display = "block";
    document.getElementById("chatbutton").style.display = "block";
    c = document.getElementById("chatbutton");
    i = document.getElementById("chatinput");
    cm = document.getElementById("chatmessage");
    c.innerHTML = "";
    c.style.height = "100%";
    c.style.background = "slategray";
    c.style.width = "325px";
    c.style.marginLeft = "20%";

    i.style.display = "block";
    c.style.display = "block";
}

function checkKey(e) {
    var event = window.event ? window.event : e;
    if(event.keyCode === 13){ //Enter
        i = document.getElementById("chatinput");
        sendChat(i.value);
        i.value = "";
    }
}

var clientChat = [];

function sendChat(text){
    var div = document.createElement('div');

    div.className = "chatmessage";

    div.innerHTML = text;

    div.style.display = "block";

    pushChatUp();

    clientChat[50] = div;

    document.getElementById('chat').appendChild(div);
}

function pushChatUp(){
    var correctOrder = [];
    var size = 0;
    for(var key in clientChat) {
        message = clientChat[key];
        key = Number(key) + 70;
        message.style.marginBottom = key.toString() + "px";
        correctOrder[key] = message;
        ++size;
        if(size > 28){
            correctOrder.splice(key, 1);
            message.style.display = "none";
            document.getElementById('chat').removeChild(message);
        }
        lastMessageSize = message.innerHTML.length;
    }
    clientChat = correctOrder;
}
</script>

CSS

#chatbutton{
        display: block;
        background-color: slategray;
        height: 300px;
        width: 300px; /* Full width */
        float: right;
        margin-right: -400px;
        display: none;
        background-color: white;
        position: fixed; /* Set the navbar to fixed position 
        bottom: 0; /* Position the navbar at the top of the page */
        width: 100px; /* Full width */
        height: 35px;
        margin-left: 20%;
        border-radius: 5px;
    }

    #chatinput{
        display: none;
        overflow: hidden;
        background-color: lightblue;
        position: fixed; /* Set the navbar to fixed position */
        bottom: 0; /* Position the navbar at the top of the page */
        width: 290px; /* Full width */
        height: 35px;
        margin-left: 21%;
        margin-bottom: 5px;
        font-size: large;
    }

    .chatmessage{
        display: none;
        overflow: hidden;
        background-color: lightgray;
        position: fixed; /* Set the navbar to fixed position */
        bottom: 0; /* Position the navbar at the top of the page */
        width: 295px; /* Full width */
        height: auto;
        margin-left: 25.5%;
        margin-bottom: 50px;
        font-size: large;
        z-index: 10;
        font-family: Helvetica Neue;
        border-radius: 5px;
    }