JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="contain">
<div class="scroll">
<div class="board" id="board">
Start
</div>
</div>
</div>

<div class="messages" id="messages">
Hello
</div>


<input type="text" id="text">
<a href="#" onclick="add()">Add</a>

CSS

body {font-family:courier;background-color:#111111;color:green;}
body a {color:green;text-decoration:none;}

.contain {width:400px;height:200px;margin:auto;background-color:#222222;}
.scroll {width:400px;height:200px;overflow:auto;display:flex;
  flex-direction:column;
  height:100%;}
.board { flex: 1;
  height:100%;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
  padding:10px;}
  
  .messages {display:none;}
  
input[type=text] {
  border: 1px solid #333333;
  background-color: #222222;
  color:green;
}
input[type=text]:focus {
  background-color: #222222;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

JavaScript

function check() {

setTimeout(function(){
document.getElementById('board').innerHTML = '';
var stuff = document.getElementById('messages').innerHTML;
var aDiv = document.createElement('div');
aDiv.innerHTML = stuff;
document.getElementById('board').appendChild(aDiv);
check();
}, 3000);

}
check();

function add(){
var text = document.getElementById('text').value;

var messages = document.getElementById('messages');
var newDiv = document.createElement('div');
newDiv.innerHTML = text;
messages.appendChild(newDiv);
}