JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
    
    <head>
        <meta charset="utf-8" />
        <title>Tab problem</title>
        <script>
            $(function() {
                var tabs = $("#tabs").tabs({});
            });
        </script>
    </head>
    
    <body>
        <div id="tabs" class="ui-layout-center">
            <ul id="tab-list">
                <li><a href="#tab-1">Tab #1</a>

                </li>
                <li><a href="#tab-2">Tab #2</a>

                </li>
            </ul>
            <div id="tab-1">This content shall: fill up the entire space (left
                 to right) until the bottom of the page. But it shall -NOT- cover
                 the tabs!
            </div>
            <div id="tab-2">Tab 2 content: This content shall: fill up the entire space (left
                 to right) until the bottom of the page. But it shall -NOT- cover
                 the tabs!
            </div>
        </div>
    </body>

</html>

CSS

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#tab-list {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
}
#tabs {
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
}
#tab-1, #tab-2 {
    background: green;
    position: absolute;
    top: 48px;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 10px;
}