JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Audiotest</title>
    <script type="text/javascript">
        var Console =
        {
            list_title:"Console",
            btn_start_name:"startScroll",
            btn_stop_name:"stopScroll",
            list_style:{
                "backgroundColor"   : "#000",
                "color"             : "#ccc",
                "width"             : "100%",
                "height"            : "400px",
                "border"            : "1px solid black",
                "overflow"          : "scroll",
            },
            max_list_size_len:10000,
            list_line_element:"div",
            wrap:null,
            title:null,
            list:null,
            btn_start:null,
            btn_stop:null,
            scroll_interval:null,
            init:function(wrap_element_id)
            {
                this.wrap       = document.getElementById(wrap_element_id),
                this.list       = document.createElement("div"),
                this.title      = document.createElement("h3"),
                this.btn_start  = document.createElement("button"),
                this.btn_stop   = document.createElement("button");
                for(var attr in this.list_style){
                    this.list.style[attr] = this.list_style[attr];
                }
                this.btn_start.appendChild(document.createTextNode(this.btn_start_name)),
                this.btn_start.addEventListener(
                    'click', function(){ Console.startScroll(); }, false
                ),
                this.btn_stop.appendChild(document.createTextNode(this.btn_stop_name)),
                this.btn_stop.addEventListener(
                    'click', function(){ Console.stopScroll(); }, false
                ),
                this.title.appendChild(document.createTextNode(this.list_title)),
                this.wrap.appendChild(this.title),
               ...