JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

CSS

.minimize_button{
    position:fixed;
    bottom: 0;
    left:2px;
    margin: 1px;
    z-index: 999;
    box-sizing: border-box;
    border-radius:5px;
    vertical-align :  text-bottom;
}

.app_container_T{
    position:fixed;
    bottom: 0;
    left:0;
    z-index: 998;
    padding: 0;
    height: 150px;
    box-sizing: border-box;
}

.app_container_T > li { /*create a class for them to share itll be faster, like t_ul*/
    display: inline-block;
    height: 100%;
}

.t_ul{
    list-style: none;
}

 .app_container_T * {
    box-sizing: border-box;
    border-radius:5px;
    vertical-align :  text-bottom;
}
/*------------------------------------------------------------------------------------*/
 /*----Menu---*/
/*------------------------------------------------------------------------------------*/
.menu_T {
    
    background-color:lightblue;
    padding: 0px;
    width:60px;
    height: 100%;
}

.large_menu_button_T{
    background: #0016f0;
    color: #ffffff;
    height: 50px;
    width: 50px;
    margin: 3px;
    font-size: 20px;
    border-radius:10px;
}
.small_menu_button_T{
    background: #002aa9;
    color: #ffffff;
    height: 20px;
    width: 20px;
    margin: 1px;
    font-size: 12px;
}

.options{
    margin-left: 26px;
}
.ui-resizable-n {
    cursor: n-resize;    
    border-top: 5px solid #f00;
}

JavaScript

var table_container = $("<ul />", {
            class: "app_container_T t_ul ui-widget-content",
            id: "resizable"
        });
        table_container.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"
                            });
                            var element_button = $("<button />", {
                                text: 'T',
                                class: "large_menu_button_T"
                            });
                           
                            var options_button = $("<button />", {
                                text: 'o',
                                class: "small_menu_button_T options"
                            });
                        section_1.append(add_element_button);
                        section_1.append(element_button);
                        section_1.append(minimize_button);
                        section_1.append(options_button);
                    menu.append(section_1);
                row.append(menu);
            table_container.append(row);
             var minimize_button = $("<button />", {
                                text: 'm',
                                class: "small_menu_button_T minimize_button"
                            });
        $('body').append(table_container);
        $('body').append(minimize_button);