JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

CSS

.app_container_T {
    position:fixed;
    bottom:0;
    left:0;
    z-index: 998;
    background-color:grey;
    margin: 0;
    padding: 0;
}
.app_container_T > li {
    /*create a class for them to share itll be faster, like t_ul*/
    display: inline-block;
}
.t_ul {
    list-style: none;
}
.app_container_T * {
    box-sizing: border-box;
    border-radius:5px;
    vertical-align : text-bottom;
}
.menu_T {
    background-color:lightblue;
    padding: 0px;
    width:60px;
}
.large_menu_button_T {
    background: #0016f0;
    color: #ffffff;
    height: 50px;
    width: 50px;
    margin: 3px;
    font-size: 20px;
    border-radius:10px;
}
.ui-resizable-n {
    cursor: n-resize;
    width: 100%;
    top: 0px;
    left: 0;
    border-top: 5px solid #f00;
    z-index: 999;
}

JavaScript

$(function () {
    var table_container = $("<ul />", {
        class: "app_container_T t_ul resizeable ui-widget-content"
    });
    $(".resizeable").resizable({
        handles: "n"
    });
    var row = $("<li />"

    );
    var menu = $("<ul />", {
        class: "menu_T t_ul"
    });
    var section_1 = $("<li />");
    var add_element_button = $("<button />", {
        text: '+',
        class: "large_menu_button_T"
    });
    section_1.append(add_element_button);
    menu.append(section_1);
    row.append(menu);
    table_container.append(row);
    $('body').append(table_container);
});