JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabs" class="ui-layout-center">
    <ul>
        <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">Some more content.</div>
</div>

CSS

html, body {
    height: 100%;
}
#tabs {
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
    overflow: hidden;
}
#tabs div[id*=tab] {
    height: 100%;
}
#tabs #tab-1 {
    background: green;
}
#tabs #tab-2 {
    background: blue;
}

JavaScript

$(function () {
       var tabs = $("#tabs").tabs({});
   });